React.js Component not being created

Question

I have an array of objects I wanted to display in a table. I have the following code

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  render() {
    return (
      <table>
          {this.state.data.map(row => {
            console.log(row);
            <Test/>
          })}
      </table>
    );
  }
}

class Test extends React.Component {
  constructor(props) {
    super(props);
    console.log("7");
  }

  render() {
    return;
  }
}

The console.log() in the Table prints out all my data correctly, however, the console.log() in my Test constructor never prints.
Why is the Test not being created?

My proper rows is below:

class Rows extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.rowData
    };

    console.log("2");
  }

  render() {
    return (
      <tr>
        <td>{this.state.data.paymentFrom}</td>
        <td>{this.state.data.paymentTo}</td>
        <td>{this.state.data.paymentPeriod}</td>
        <td>{this.state.data.paymentAmount}</td>
      </tr>
    );
  }
}

Alejandro Lariccia · Accepted Answer · 2018-11-24 04:50:41Z

2

For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.

Try this way:

class Table extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  render() {
    return (
      <table>
          {this.state.data.map(row => {
            console.log(row);

            return (<Test/>)
          })}
      </table>
    );
  }
}

class Test extends React.Component {
  constructor(props) {
    super(props);
    console.log("7");
  }

  render() {
    return;
  }
}

answered Nov 24, 2018 at 4:50

Alejandro Lariccia

3691 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andy Ray · Accepted Answer · 2018-11-24 04:47:48Z

1

You need to return <Test/> for it to initiate and render.

answered Nov 24, 2018 at 4:47

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

4 Comments

Scyl Over a year ago

Doesn't seem to work, that whole section is inside a return already.

Andy Ray Over a year ago

This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.

Scyl Over a year ago

you are correct, I was testing the wrong version. Why is an extra return needed?

Dinesh Pandiyan Over a year ago

The extra return is not for React but for the .map method. That's how .map works in js. You have to return from with .map() method. If you don't, it won't be part of the new array constructed by .map.

Collectives™ on Stack Overflow

React.js Component not being created

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related