CODEWITHSUNDEEP
jsonreactjsreduxreact-reduxrender
Suraj Sharma
Suraj Sharma

Reputation: 180

How to display the fetched json from redux in my react component?

I have the following poems json in my redux store:

poems: {
'5a0f3367af648e17fa09df5d': {   //this is my poem id
  _id: '5a0f3367af648e17fa09df5d', //this is also the same as above
  title: 'my first poem',
  text: 'some lorem ipsum long text ',
  userId: '5a03f045995c0f5ee02f9951',  //this is my user id
  __v: 0
},
'5a0ff2a5b4a9591ecb32d49c': {
  _id: '5a0ff2a5b4a9591ecb32d49c',
  title: 'my second poem',
  text: 'some lorem ipsum long text',
  userId: '5a03f045995c0f5ee02f9951',  //this is the same user id as above
  __v: 0
}


}

Now how to display title and text for each poem in my react component . Here I have only 2 poems along with poems id . But the number of poems may vary with different users . So basically I need a way to get these poems from my redux store to my component and then render them .

Upvotes: 1

Views: 472

Answers (1)

Ajay Gaur
Ajay Gaur

Reputation: 5270

You can use connect from react-redux to get the content of react-redux state and pass them as props in the react component

import React from 'react';
import _ from 'lodash';
import {connect} from 'react-redux';

class Poems extends React.Component {
    render(){
       return (
           <div>
               //poems from state will be passed as props to this component
               {_.map(this.props.poems, poem => {
                   return (
                       <div>
                          <div>{poem.title}</div>
                          <div>{poem.text}</div>
                       </div>
               )}
           </div>
       );
    }
}

const mapStateToProps = (state) => ({
   poems: getPoems(state);    //method to get poems from redux state
});

export default connect(mapStateToProps)(Poems);

Upvotes: 1

Related Questions