How can I render an array of objects?

Question

I have an error like this one in my console :

Objects are not valid as a React child (found: object with keys {id, marketId, title, picture, language, flag, completed, date, rate, categories}). If you meant to render a collection of children, use an array instead.

this is my data in back :

const demoCompletedData = [
  {
    id: 1,
    marketId: "1111-1111-1111-1111",
    title: "Autonomous car",
    picture: "https://th?id=OIP.fdvfdvfdvfdvfd&pid=Api",
    language: "English",
    flag: "🇬🇧",
    completed: true,
    date: "22/01/2019 10:30",
    rate: 9.1,
    categories: {
      de: 1,
      sp: 2,
      uk: 0,
      fr: 1,
      us: 4,
    },
  },

and my code in front I use redux :

  fetchDemo() {
    this.props.demoFetchRequest();
    const { marketId } = this.props.match.params;
    axios.get(`/api/v1/passport-authenticate/market/${marketId}`)
      .then((res) => { return res.data; })
      .then(demo => this.props.demoFetchSuccess(demo))
      .catch(error => this.props.demoFetchError(error));
  }

my code in render :

const { demo } = this.props;

and my code in return :

{demo}

How can map the key categories and read its value ?

Answer 1

Your data is an array of objects. You can't render it directly like this. map over your array and render what do you want to display.

{demo.map(el => (
    <div>
        <p>{el.id}</p>
        <p>{el.title}</p>
        {Object.keys(el.categories).map(key => (
            <p>{key}:{el.categories[key]}</p>
        ))}
    </div>
))}

 const demo = [ { id: 1, marketId: "1111-1111-1111-1111", title: "Autonomous car", picture: "https://th?id=OIP.fdvfdvfdvfdvfd&pid=Api", language: "English", flag: "🇬🇧", completed: true, date: "22/01/2019 10:30", rate: 9.1, categories: { de: 1, sp: 2, uk: 0, fr: 1, us: 4 } } ]; const App = () => ( <div> {demo.map(el => ( <div> <p>{el.id}</p> <p>{el.title}</p> {Object.keys(el.categories).map(key => ( <p> {key}:{el.categories[key]} </p> ))} </div> ))} </div> ); ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"/> 

Answer 2

Your demo variable is an array. you need to iterate over using map.

{demo.map(item => <div>{item.title}</div>)}

Also the ajax call response needs to be stored in state as props are readonly.

axios.get('/url')
 .then((response) => {
   console.log(response);
   this.setState({demo: response.data})
 })
.catch((error)=>{
   console.log(error);
});

And in render access it as

const {demo} = this.state;