Why mapping of array of objects not working in my table component of react?

Question

Below is my code that I'm working on and click here for the codesandbox link.

import React from "react";
import ReactDOM from "react-dom";

class PhoneBookForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      phoneNo: ""
    };
  }
  onChange = event => {
    this.setState({ [event.target.name]: event.target.value }, () => {
      console.log(this.state);
    });
  };

  onSubmit = () => {
    console.log("called");
    this.props.appendToList({
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      phoneNO: this.state.phoneNo
    });
  };

  render() {
    return (
      <div>
        <label>First Name:</label>
        <input type="text" name="firstName" onChange={this.onChange} />
        <br />
        <label>Last Name:</label>
        <input type="text" name="lastName" onChange={this.onChange} />
        <br />
        <label>Phone Number:</label>
        <input type="text" name="phoneNo" onChange={this.onChange} />
        <br />
        <button onClick={this.onSubmit}>Submit</button> <br />
        <br />
      </div>
    );
  }
}

function InformationTable(props) {
  console.log("props info", props.peoples);
  return (
    <table>
      <thead>
        <th style={{ border: "solid 1px" }}>First Name</th>
        <th style={{ border: "solid 1px" }}>Last Name</th>
        <th style={{ border: "solid 1px" }}>Phone No</th>
      </thead>
      {props.peoples.map(person => {
        return (
          <tr key={person.phoneNo}>
            <td>{person.firstName}</td>
            <td>{person.lastName}</td>
            <td>{person.phoneNo}</td>
          </tr>
        );
      })}
    </table>
  );
}

class Application extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listOfPeople: [{}]
    };
  }

  appendToList(people) {
    console.log("called2");
    // let peoples = this.state.listOfPeople.push(people);
    console.log("people", people);
    this.setState({ listOfPeople: people }, () => {
      console.log(this.state.listOfPeople);
    });
  }

  render = () => {
    return (
      <section>
        <PhoneBookForm appendToList={this.appendToList.bind(this)} />
        <InformationTable peoples={this.state.listOfPeople} />
      </section>
    );
  };
}

ReactDOM.render(<Application />, document.getElementById("root"));

As you can see above the InformationTable component doesn't render whenever I'm trying to hit the submit button. You can try yourself also on the codesandbox. As soon as you click on that submit button you'll be prompted with a error message in the console saying The above error occurred in the InformationTable component and blank page is showing instead of the result I'm are looking for.

However, if I remove this whole line below from the component then it behaves normally

{props.peoples.map(person => {
        return (
          <tr key={person.phoneNo}>
            <td>{person.firstName}</td>
            <td>{person.lastName}</td>
            <td>{person.phoneNo}</td>
          </tr>
        );
      })}

I've also console logged above like this console.log("props info", props.peoples); to verify if the object has data. I think I'm missing a very tiny detail that I'm not able to figure out right now.

I have no idea if it matters, but is this a typo? The "NO" instead of "No" = phoneNO: this.state.phoneNo — Nikki9696
– Nikki9696, Commented Dec 12, 2019 at 17:50
@Nikki9696 The error is still there even after fixing the typo. You can check it out in the codesandbox link above. — Abhinav
– Abhinav, Commented Dec 12, 2019 at 18:03
I posted an answer but since I'm not a react person I see that Nilesh's is probably better and deleted it. Either way, the issue is that you're appending an object, not an array, so map is undefined. — Nikki9696
– Nikki9696, Commented Dec 12, 2019 at 18:07

Nilesh Patel · Accepted Answer · 2019-12-12 18:03:38Z

2

here is the code fix

appendToList(people) {
    console.log("called2");
    // let peoples = this.state.listOfPeople.push(people);
    console.log("people", people);
    // this.setState(prevState => {
    //   listOfPeople: prevState.listOfPeople.concat(people);
    // });
    this.setState({ listOfPeople: this.state.listOfPeople.concat(people) }, () => {
      console.log(this.state.listOfPeople);
    });
  }

answered Dec 12, 2019 at 18:03

Nilesh Patel

3,3079 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Why mapping of array of objects not working in my table component of react?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related