CODEWITHSUNDEEP
javascriptreactjs
user11429164
user11429164

Reputation: 87

How can I render an array of objects?

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 ?

Upvotes: 0

Views: 77

Answers (2)

devserkan
devserkan

Reputation: 17638

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

Upvotes: 1

swapnil2993
swapnil2993

Reputation: 1394

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;

Upvotes: 0

Related Questions