CODEWITHSUNDEEP
javascriptjsonreactjs
Sathya
Sathya

Reputation: 1734

How to insert json data in React js?

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

Upvotes: 3

Views: 8530

Answers (3)

Kavish Mehta
Kavish Mehta

Reputation: 53

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')
);

Upvotes: 1

andrei
andrei

Reputation: 8602

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

Upvotes: 2

Bijeshp009
Bijeshp009

Reputation: 248

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

Upvotes: 0

Related Questions