New to React. I can't render all the elements from JSON data I am receiving from Django. I am stuck for a week

Question

This is the JSON:

[{id: 1, category1: "english", category2: "bulgarian",…},…]

0: {id: 1, category1: "english", category2: "bulgarian",…} category: [{id: 1, value1: "table", value2: "маса", date_publish: "2020-07-19T15:07:15.423703Z", category: 1},…] category1: "english" category2: "bulgarian" id: 1 user: 1

App.js

return (
    <div className="App">
        <header className="App-header">
            <h1>Flip Cards</h1>
        </header>
        <div className="leyout">
            <AllElements
                pear={pear} 
            />
        </div>
    </div>
);}

export default App;

AllElements.js

import React from 'react';

function AllEllemnts(props){
    return (
        <div className="AllElemts">
            { props.pear && props.pear.map((pear) => {
                return (
                    <div key={pear.id} className="Allelements">
                        <h2>{pear.category1}-{pear.category2}</h2>
                        <p>{pear.category.value1}</p>
                    </div>     
                )
            })}
        </div>
    )
}


export default AllEllemnts;

Answer 1

You did not provide a proper example of your JSON object. I've made a solution for you on codesandbox with the help of JSON SERVE

Here is the code: https://codesandbox.io/s/nervous-lovelace-w5oyq?file=/src/App.js