react matrerial ui Error: Objects are not valid as a React child 如果您打算渲染一组子项，请改用数组

Question

I am facing the error with the following code and there seems to be no fixes that is solving my issue.

 componentDidMount() { axios.get('http://localhost:8080/home').then((response) => { this.setState({ data: response.data }); }).catch((err) => { console.log(err); }); }

response from server:

 {"data":{"count":{"monthly_blog_count":1,"total_blog_count":1,"monthly_poem_count":0,"total_poem_count":0,"monthly_song_count":0,"total_song_count":0,"monthly_graphics_count":1,"total_graphics_count":1},"latest_graphics":{"link":"ganesha.svg"},"latest_blog":{"title":"test","created":"2021-05-08T07:49:50.000Z","name":"Abhishek Banerjee"},"latest_blog_list":[{"title":"test","created":"2021-05-08T07:49:50.000Z","name":"Abhishek Banerjee"}]}}

 <Poems data={data} />

Here's the poem component edited as it's not allowing all code: the base element is card. I took out code from the poem component since it's complaining not enough text. I have protypes validation on the component as well.

 const Poems = (props) => { const { data: count, 'data.count.total_poem_count': totalPoemCount, 'data.count.monthly_poem_count': monthlyPoemCount, } = props; return ( <Card sx={{ height: '100%' }} {...props} > <Grid item> <Typography color="textPrimary" variant="h3" > { totalPoemCount } </Typography> </Grid> <Typography sx={{ color: green[900], mr: 1 }} variant="body2" > { monthlyPoemCount } </Typography> </card> ); };

Edit

putting { data?.data?.count?.total_poem_count } works like a charm. But the proptypes validation is gone. Can anyone suggest me how to get proptypes as well working.

Answer 1

Best Practice is to use axios package for fetching api.

axios.get("http://localhost:8080/home")
.then((response) => {
        this.setState({
          data: response.data
        });
      })
      .catch((err) => {
        console.log(err);
      });

passing data to component

<Poems data={this.state.data} />

child component

const Poems = ({ data }) => {
const dataToRender = data?.data


  return (
        <Card
          sx={{ height: '100%' }}
          {...props}
        >
          <Grid item>
            <Typography
              color="textPrimary"
              variant="h3"
            >
              { dataToRender.count.totalPoemCount }
            </Typography>
          </Grid>
          
          <Typography
            sx={{
              color: green[900],
              mr: 1
            }}
            variant="body2"
          >
            { dataToRender.count.monthlyPoemCount }
          </Typography>
     </card>
  );
};

<