Wordpress to React REST API : Objects are not valid as a React child (found: object with keys {rendered})

Question

I have tried to access WP REST to React. Fetch method get data I have consoled and check. When I try to bind data to the frontend map function throws an error.

import React,{ Component } from 'react';

class HomePage extends Component{
    constructor(props){
        super(props);
    

    this.state = {
        loading:true,
        Companies:[]
    }
    }
    async componentDidMount(){
    
        
        let data= fetch('https://example.co/wp-json/wp/v2/company?per_page=10').then((resp) =>{
        resp.json().then((res)=>{
        console.log(res);
        this.setState({Companies:res,loading:false})
        })
      })
    }

    render() {

    const Companies = this.state.Companies;
      return (
        <div>

        
        


          <section className="selected-firms-banner" style={{backgroundImage: 'url("https://example.co/wp-content/themes/demotheme/images/Hero-Banner.jpg")'}}>
            <div className="container">
              <div className="banner-content">
                <div className="row">
                  <div className="col-md-12 banner-title">
                    <h1> Firms Premised on Top to Bottom Scrutiny and Analysis</h1>
                  </div>
                  <div className="col-md-12 banner-description">
                    <p>Discover the top-notch Software Development firms over the globe. We investigate every possibility to give you a chance to find a portion of the eminent firms that will concur your needs and conveys superb administrations/surveillance.</p>
                    
                  </div>
                </div>
              </div>
            </div>
          </section>
          <section className="sf-post-listing">
            <div className="container">
              <div className="listing-post-main">
                <div className="row">             
    



        
        {Companies.map((company, i) => {
               return (<div className="col-md-6 col-lg-4 col-sm-12">
               <div className="listing-post-card effect-image-1 zoom-effect-1">
                 <img src="images/listing1.jpg" className="img-fluid" />
                 <div className="overlay simple-overlay"><i className="fa fa-link" aria-hidden="true" /></div>
               </div>
                  <h3>{company.title}</h3>
             </div> )
             })}
    
            
                </div>
              </div>
            </div>
          </section>
        </div>
      );
    }
  }

export default HomePage;

Complete component is proper just render data part cause an issue.

Error: Objects are not valid as a React child (found: object with keys {rendered}). If you meant to render a collection of children, use an array instead.

you need to wait for api and after that you can call it – Nisharg Shah Nov 25 '20 at 14:13 — Nisharg Shah, Nov 25 '20 at 14:13

Nisharg Shah · Accepted Answer · 2020-11-27T14:48:36.993

0

You need to wait for some time to API calling

Use async/await for that

async componentDidMount() {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos");
    const data = await response.json();
    this.setState({ Companies: data, loading: false });
}

https://codesandbox.io/s/bold-bash-hpefh?file=/src/App.js

edited Nov 27 '20 at 14:48

answered Nov 25 '20 at 14:20

Nisharg Shah

16,638
10
62
73

Data is appear in console – Vasim Shaikh Nov 25 '20 at 14:49
what are you want to say? – Nisharg Shah Nov 25 '20 at 14:53
I have issue in map function. That error is still there – Vasim Shaikh Nov 25 '20 at 14:58
check again, and tell me – Nisharg Shah Nov 25 '20 at 14:59
Error: Objects are not valid as a React child (found: object with keys {rendered}). If you meant to render a collection of children, use an array instead. ▶ 21 stack frames were collapsed. HomePage.componentDidMount src/templates/Home/home.js:16 13 | async componentDidMount() { 14 | const response = await fetch("https://example.co/wp-json/wp/v2/company"); 15 | const data = await response.json(); > 16 | this.setState({ Companies: data, loading: false }); – Vasim Shaikh Nov 25 '20 at 15:00
please follow the code sandbox URL and check on that, you find any error in that URL? – Nisharg Shah Nov 25 '20 at 15:01
If you like my answer or you got any help from my answer, don't forget to consider up-vote and check this answer as the best answer for you by clicking on the right arrow, thanks! – Nisharg Shah Nov 25 '20 at 15:09
so your original problem is not related to this problem – Nisharg Shah Nov 26 '20 at 07:21
that is your environment, please check https://stackoverflow.com/questions/33117449/invariant-violation-objects-are-not-valid-as-a-react-child – Nisharg Shah Nov 26 '20 at 07:40
If you like my answer or you got any help from my answer, don't forget to consider up-vote and check this answer as the best answer for you by clicking on the right arrow, thanks! – Nisharg Shah Nov 27 '20 at 14:28
1

I have debug there is an issue with Array. Thank you. – Vasim Shaikh Nov 27 '20 at 14:34
Please add an full answer instead of link – Vasim Shaikh Nov 27 '20 at 14:35

Wordpress to React REST API : Objects are not valid as a React child (found: object with keys {rendered})

1 Answers1