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
 }
]

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
 }
]

• javascript
• json
• reactjs

Share Improve this question Follow asked Nov 30, 2015 at 10:44 SathyaSathya 1,73433 gold badges3838 silver badges5959 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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

Here is working code: http://jsbin./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')
);

Pass it as a propety to the ponent 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