如何在React js中插入json数据？

Question

I have a following list of data's. I need to insert my template. How to achieve this one with React js.

[
 {
  product:"one",
  quantiy:2
 },
 {
  product:"two",
  quantiy:4
 },
 {
  product:"three",
  quantiy:3
 }
]

Answer 1

Here is a working jsbin example http://jsbin.com/ziqelujevi/2/edit?html,js,output

Update: Display all the items http://jsbin.com/cibuhogudu/1/edit?html,js,console,output

Answer 2

Here is working code: http://jsbin.com/wafemul/edit?html,js,output

var data = [
 {
   product:"one",
   quantiy:2
 },
 {
   product:"two",
   quantiy:4
  },
 {
  product:"three",
  quantiy:3
 }
];

class App extends React.Component {

 constructor(props){
  super(props);
   this.state= {
    data: data
   }
  }

render() {
  return (
    <div>
      <h1>Heading</h1>
      <div>{this.state.data.map( item => (
       <li>{item.product}</li>
       ))}
      </div>
     </div>
    );
  }
};

ReactDOM.render(
 <App />,
 document.getElementById('box')
);

Answer 3

Pass it as a propety to the component and you can access it using this.props.data in the render method.

Ex:

 var data = [....] <SampleComponent data={data} />, 

Or use state to pass data