how to parse loop for json in react js

Question

I am new to react.

    this.state = { histories: [
                   {
                  "qas":[
                    {"question": "hi1", "answer": "hello1"},
                    {"question": "hi2", "answer": "hello2"}

                  ]
                }
              ] };
render(){
    return ( 
      <div>
          <History 
          histories={this.state.histories} />
      </div>
    );
  }

In separate component page, I would like to use react js to render question and answer by loop or map, however I tried map, it didn't recognize map. I have tried for loop, but it didn't get the child attribute from it.

   const history = ({histories}) => { 
     return(
          <div>
              {histories[0].qas[0].question}
          </div>
          <div}>
            {histories[0].qas[0].answer}
          </div>
      );
}

Show us the code with map

Weedoze
– Weedoze

2017-05-16 11:44:37 +00:00
Commented May 16, 2017 at 11:44 — Weedoze
– Weedoze, Commented May 16, 2017 at 11:44
Use map on state.histories as that's the array.

evolutionxbox
– evolutionxbox

2017-05-16 12:00:05 +00:00
Commented May 16, 2017 at 12:00 — evolutionxbox
– evolutionxbox, Commented May 16, 2017 at 12:00

Zero · Accepted Answer · 2017-05-16 14:25:49Z

1

Here is an example with map, hope it will help.

const History = ({histories}) => {
  // Quick, hacky way to set key.
  // More on keys in React https://facebook.github.io/react/docs/lists-and-keys.html#keys
  let key = 1;
  const questionsAndAnswers = histories[0].qas.map(child =>
    <div key={key++}>
      <div>{child.question}</div>
      <div>{child.answer}</div>
    </div>
  );

  return (
    <div>{questionsAndAnswers}</div>
  );
};

class Histories extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      histories: [
        {
          "qas":[
            {"question": "hi1", "answer": "hello1"},
            {"question": "hi2", "answer": "hello2"}
          ]
        }
      ]
    };
  }

  render() {
      return(
        <div>
          <History histories={this.state.histories}/>
        </div>
      )
    }
}

ReactDOM.render(
  <Histories/>,
  document.getElementById("history")
);

<div id="history"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

If you remove the “div” from the <div>{questionsAndAnswers}</div>, then you’ll get the error you encountered “A valid React element (or null)…”. If you want to render multiple elements you need to wrap them in a div. More on this https://facebook.github.io/react/docs/jsx-in-depth.html#jsx-children

answered May 16, 2017 at 14:25

Zero

3563 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ishwar Patil Over a year ago

@user2235768, accept the answer if it helped you. This will help other people looking for similar solution

Zero Over a year ago

@user2235768 Happy to help!

user2235768 Over a year ago

Thanks again, would you want to have a look of this react question, please? stackoverflow.com/questions/44023350/…

Zero Over a year ago

@user2235768 Yes, but it was already answered. The problem is with binding, so either of those answers is right. Unfortunately right now I can’t add comments there.

Zero Over a year ago

@user2235768 Great, in arrow function “this” has its original meaning from the enclosing context.

Daniel Mizerski · Accepted Answer · 2017-05-16 12:00:54Z

1

It does not recognize this histories, because I bet they are undefined at your start.

const history = ({histories}) => {
  if (!histories || histories.length < 1) return (<div>nothing</div>);
  return histories.map(v => (<div>JSON.stringify(v)</div>))
}

Another problem could be this.state.roundshistories. It is undefined in your example.

answered May 16, 2017 at 12:00

Daniel Mizerski

1,1311 gold badge8 silver badges24 bronze badges

1 Comment

user2235768 Over a year ago

<History histories={this.state.histories} />histories is pass by this, error message appears when I use your code:A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Collectives™ on Stack Overflow

how to parse loop for json in react js

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related