I'm trying to map some data that I have stored in an array (the screenshot below), but I can't seem to access them. I get two cards (which is right since there are two arrays in the array), but they are nothing is writen in them. Does anyone know why?
{this.state.serials.map((number) => (
<Card>
<Card.Body>{number.s.l}, {number.s.ta}</Card.Body>
</Card>
))}
Thanks in advance!
*Edit: This is what I get if I console.log(number.s):
number.s is an array
{this.state.serials.map((number) => {
return number.s && number.s.length? (<Card>
<Card.Body>{number.s[0].l}, {number.s[0].ta}</Card.Body>
</Card>
) : null
})}
The structure of the state serials is like bellow
let data = [
{
s: [
{l: -127, ta: "878", d: [1]}
]
},
{
s: [
{l: 22.5625, ta: "003", d: [1]}
]
},
];
console.log(data);So to access value which are in key l for each item you must perform it like this
{this.state.serials.map((number) => (
<Card>
<Card.Body>{ (number.s[0]).l }, {(number.s[0]).ta}</Card.Body>
</Card>
))}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
serials: [
{
s: [
{l: -127, ta: "878", d: [1]}
]
},
{
s: [
{l: 22.5625, ta: "003", d: [1]}
]
},
]
}
}
render() {
return this.state.serials.map((number) => (
<p>
<span><strong>{ (number.s[0]).l }</strong>, { (number.s[0]).ta }</span>
</p>
));
}
}
ReactDOM.render(<App />, document.querySelector("#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"></div>
<Card.Body>{number.s[0].l}, {number.s[0].ta}</Card.Body>