Mapping an array inside an object inside an array - reactjs

Question

I am having trouble displaying a pair of options for the corresponding prompt.
I made a .json file to hold the prompts and options.
This is the dataset:
[
{
"id": 1,
"text": "hey wut r u doin",
"options": [
{
"id": 1,
"text": "Playing Pokemon",
"nextPrompt": 2
},
{
"id": 2,
"text": "Watching a movie",
"nextPrompt": 7
}
]
},
{
"id": 2,
"text": "lol you still play that??",
"options": [
{
"id": 1,
"text": "It's fun!",
"nextPrompt": 18
}
{
"id": 2,
"text": "Just kidding ha ha...",
"nextPrompt": 7
}
}]
In the component I'm trying to go to the currentPrompt, look at the options and then from there map the text. When I console.log(currentPrompt.options) it says undefined... Why is that?
This is my component:
function PromptsAndOptions() {
const [currentPrompt, setCurrentPrompt] = useState(POA[0].text);
return (
<section>
<section>{currentPrompt}</section>
{console.log(currentPrompt)}
<section>
{currentPrompt.options &&
currentPrompt.options.map(({ text }) => (
<button key={currentPrompt.options.id}>{text}</button>
))}
</section>
</section>
);
}

Answer 1

I think your JSON file is wrong
Try the CodeSandBox
const POA = [
{
id: 1,
text: "hey wut r u doin",
options: [
{
id: 1,
text: "Playing Pokemon",
nextPrompt: 2
},
{
id: 2,
text: "Watching a movie",
nextPrompt: 7
}
]
},
{
id: 2,
text: "lol you still play that??",
options: [
{
id: 1,
text: "It's fun!",
nextPrompt: 18
},
{
id: 2,
text: "Just kidding ha ha...",
nextPrompt: 7
}
]
}];
const [id, setId] = useState(1);
const promp = POA[id].options;
return (
<section>
<section>{id}</section>
{console.log(id)}
<section>
{promp &&
promp.map((item, i) => {
return (
<>
<div key={i}>Items Text Is === {item.text}</div>
<br />
</>
);
})}
<div onChange={(e) => setId(e.target.value)}>
<input type="radio" value="0" name="gender" /> First
<input type="radio" value="1" name="gender" /> Second
</div>
</section>
</section>);