How to map an array of objects, to return an array of objects with new keys

JavaScript
1

I’m trying to render array objects, but my code only renders one object and throws an error when I try to add multiple objects.

If I try to add another Question set, it throws the following error: Line 16: Parsing error: Unexpected token

constructor(props){
super(props);
questions =  [
{
  question: "Who is the president of America?",
  answers: {
    a: "Buhari",
    b: "Putin",
    c: "Trump"
  },
{
  question: "What is  4+4 ?",
  answers: {
    a: "8",
    b: "9",
    c: "71"
  },

}         
];
this.state = {
    question : [],
};
}

handleQuestion(){ 
  this.setState({
  question: questions
});    
}
render(){    
  return (    
      <div className = "container">
      <button type="button" onClick={()=>this.handleQuestion()}>
        Show Question
      </button>   

      <ul>
        {this.state.question.map((data,i)=>(

            <li key={i}>{data.question}       
              <div>a : {data.answers.a}</div>
              <div>b : {data.answers.b}</div>
              <div>c : {data.answers.c}</div>
            </li>

          ))
         }
      </ul> 
   </div> 
 ); 
 }
 }

 export default App;
2

Your Question Object are malformed, you forgot to close a }:

{
  question: "Who is the president of America?",
  answers: {
    a: "Buhari",
    b: "Putin",
    c: "Trump"
  }, // close answers

// missing }

Try to clean it and see if it gets better :+1:

3

yes, it’s better now thanks