Passing in state as a prop to another component in react

Question

In my component, I fetch all data from my DB.

  constructor(props: ExperimentProps) {
    super(props);
    this.state = {
      viewActive: true,
      experimentData : [],
    };


  componentWillMount() {
    //this.props.fetchExperiments();
    makeQuery(ExperimentsListQuery)
      .then(responseData => {

        this.setState(prevState => ({
          experimentData: responseData.Experiments
        }))
      })

      .catch(err => {
        //actions.setSubmitting(false);
        console.log(err);
      });
  }

This fetches all data from Experiments table and stores it into the experimentData state correctly.

Now I try to render it my passing it into another component called ListRow .

<div className="experiments-list-container">
  <ListRow rowItems={this.state.experimentData}/>
</div>

The render in my ListRow component looks like

render() {
  console.log('rowItems', this.props.rowItems)
  const dateDisplay = moment(this.props.createdAt).format('MMM YYYY');
  return (
      <tr className="experiment-list__row" onClick={this.handleRowClick}>
        <td className="experiment-list--col__check">
          <Checkbox />
        </td>
        <td>{this.props.rowItems.name}</td>
        <td>{this.props.rowItems.owner}</td>
        <td>{dateDisplay}</td>
      </tr>
  );
}

When I console.log it, it displays the right data :

(5) [{…}, {…}, {…}, {…}, {…}]
0:
{id: 1, name: "test", owner: "hdsfds", status: null}

...

Something like this format.

However, it displays nothing on my page.

How can I fix it?

Answer 1

It seems like you're passing an array down to your ListRow component. You need to use a map function to return each item.