Как передать массив состояний в реквизит

Question

Итак, у меня есть 2 файла React, App.js и category.js.Когда я передаю свой массив в category.js, он показывает огромный текстовый блок вместо того, чтобы разбивать его на разные кнопки массива.Я пытался искать, но я не понимаю, как это сделать.Может кто-нибудь объяснить это?

вот класс приложения

class App extends React.Component {
Object.keys(data.categories).forEach((category,index) => {
    arr.push(data.categories[index].name);
})

render() {
return (
<div>
    <Categories 
      categoryName = { this.state.categoryName }
    />
</div>

а вот категории с использованием реквизита

const Categories = props => (
<div>
    <br /> 
    { props.categoryName && <button> { props.categoryName } </button>}
</div>
);

Answer 1

Предполагая, что ваши категории являются массивом объектов в состоянии вашего компонента, map над категориями состояния и возвращаете компонент Category с каждой итерацией массива.

function Category({ categoryName }) {
  return (<button>{categoryName}</button>);
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { categories: [ { categoryName: 'Bob', type: 'string' },  { categoryName: 'Trevor', type: 'number' }] };
   }

   render() {
     return (
       <div>
         {this.state.categories.map(category => {
           return <Category categoryName={category.categoryName} />
         })}
       </div>
     )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Answer 2

Вам нужно отобразить массив categoryName

const Categories = props => (
   <div>
      <br /> 
      { props.categoryName &&
        props.categoryName.map(name => <button>{name}</button>)}
   </div>
   );