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 ?

devserkan · Accepted Answer · 2019-04-30 11:47:05Z

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"/>

it's OK to read this keys but how can i map "categories" and keys, values of categories (de : 1, fr: 0, us: 3, uk: 2, ...)
You can use Object.keys and render it where do you want again.
This means that when you try to render that demo in the first place, it is not an array. Your data is coming from a remote place, so you should consider conditional rendering. Also, if you hold this data in your component state you can set it's initial value to an empty array. In either case, this problem is not related to this question. You can ask a new question with a mvce.

swapnil2993 · Accepted Answer · 2019-04-30 11:26:24Z

0

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;

answered Apr 30, 2019 at 11:26

swapnil2993

1,39411 silver badges16 bronze badges

1 Comment

user11429164 Over a year ago

it's OK to read this key "title" but how can i map "categories" to read de, us, uk, ...

Collectives™ on Stack Overflow

How can I render an array of objects?

2 Answers 2

5 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Related