Как принимать значения, в виде массива, в классовый компонент?

Question

Ребята, помогите довести до ума код... Есть классовый компонент Btns. В данном случаи он должен формировать 2 кнопки с соответствующим текстом (Male, Female).

Попробывал так - items: [props.items].map((item, index) => ({... Но не получается.

Хочу чтобы он принимал значения при рендеринге, как массив элементов (<Btns items={('Male', 'Female')} />)

class Btns extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [props.items].map((item, index) => ({
        item: item,
        id: index++,
      })),
      active: 0,
    };
  }

  onClick = (e) => {
    this.setState({
      active: +e.target.dataset.index,
    });
  };

  render() {
    const {
      items,
      active
    } = this.state;

    return ( <
      React.Fragment > {
        items.map((item, index) => ( <
          div key = {
            item.id
          }
          data - index = {
            index
          }
          className = {
            index === active ? 'item active' : 'item'
          }
          onClick = {
            this.onClick
          } > {
            item.item
          } <
          /div>
        ))
      } <
      /React.Fragment>
    );
  }
}

export default Btns;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Другими словами, если в классовом компоненте заменить строку на items: ['Male', 'Female'].map((item, index) => ({.... - все работает отлично. Но я хочу использовать этот компонент динамически (в другом месте, есть иное кол-во элементов и другой текст)

БЛОГ НА HUSL

Как принимать значения, в виде массива, в классовый компонент?

Ответы (0 шт):