How do i properly initialize my state, and then render that data onto the page

Question

I'm setting up a "My account" page, I need to display the payload created after the componentDidMount() function. However, When I set my state and render it,only my email renders. How do I access the rest of the payload

import React, { Component } from "react";
import axios from "axios";
//import...


//const StyledCard 

const StyledDiv = styled.div`
  margin-top: 100px;
  margin-right: 15px;
  margin-left: 15px;
`;

class MyAccount extends Component {

  state = {
    data: ['default',],

    };


  async componentDidMount() {
    const payload = { email: "tynantynan8@gmail.com",
       name: "Tynan McGrady",
       surname: "",
      middleName:  "",
      number: "(805) 240-6258",
      adress: "407 s. mayfair ave",};


   //var payload = ["tynantynan8@gmail.com", "Tynan McGrady", " ", " ","(805) 240-6258","407 s. mayfair ave"];
    await axios
      .post("http://localhost:1234/user/profile", payload)
      .then(res => {
        const data = res.data;
        console.log(data);


        this.setState({
          data:data
        })


      });




}
  render() {

    return (
      <container>
        <row>
          <StyledDiv>
            <StyledCard>
              <Card.Header as="h5">Profile</Card.Header>          
              <Card.Body>


                <Container>
                <Row>

                  <p> {this.state.data.email} </p>
        <p> {this.state.data.name} </p>
                </Row>
                </Container>
              </Card.Body>
            </StyledCard>

          </StyledDiv>
        </row>
      </container>
    );
  }
}

export default MyAccount;

Expected results, display items on the page using this.state.data or something similar

These are the errors I get:

Objects are not valid as a React child (found: object with keys {_id, first_name, middle_name, last_name, dob, email, address, __v}). If you meant to render a collection of children, use an array instead.

Possible duplicate of [Objects are not valid as a React child. If you meant to render a collection of children, use an array instead](https://stackoverflow.com/questions/52428879/objects-are-not-valid-as-a-react-child-if-you-meant-to-render-a-collection-of-c) — devserkan, May 16 '19 at 20:25
Do not try to render your data directly like this. As you can see, you can't render an object. Use its properties separately, like first_name, middle_name, etc. If it is an array you should map over it. — devserkan, May 16 '19 at 20:27

score 0 · Answer 1 · answered May 16 '19 at 20:28

0

Because this.state.data is an object, you would need to access the keys inside the object in order to display them.

For example...

{ this.state.data.first_name }

answered May 16 '19 at 20:28

Ladi Adenusi

1,082
7
11

score 0 · Answer 2 · answered May 16 '19 at 20:33

0

You cannot render object Things that can be rendered are * Strings * Components * Array of Components * DOM object The data from the response is and object. Get the required information from the object and then display it Eg: { this.state.data.value }

answered May 16 '19 at 20:33

RohanS404

41
1
8

how do i get the required information from the object and then display it. My code is above – tynantynan8 May 16 '19 at 23:54

How do i properly initialize my state, and then render that data onto the page

2 Answers2