CODEWITHSUNDEEP
reactjsreact-reduxantd
Sunil Erjal
Sunil Erjal

Reputation: 56

React component is not re-rendering after props change

React component using Ant Design Framework is not re-rendering when props are updated. Data is shown updated in the console but not updating in List tag. Here is some part of my code.

   render() {
   const props = this.props;
   data=[
   {
       'title':'name1',
       'content':props.data.content1
   },
   {
       'title':'name2',
       'content':props.data.content2
   },
   ]
   console.log("Data..",data);
   return (
    <Page {...props}>
        <Helmet title="Organizations" />
        <div className="card">
           <div className="card-header">
             <div className="utils__title">
                <strong>Organization Details</strong>
              </div>
            </div>
      <div className="card-body" span={20}>
        <div className="organization">
          <div className="organization_details">
            <List
              grid={{ gutter: 16, column: 1 }}
              dataSource={data}
              size="small"
              renderItem={item => (
                <List.Item>
                  <Card className="list1" title={item.title} bordered={false}>
                    {item.content}
                  </Card>
                </List.Item>
              )}
            />
           </div>
         </div>
       </div>
      </div>
      </Page>
    )

}

Upvotes: 0

Views: 1064

Answers (1)

Stephan Hovius
Stephan Hovius

Reputation: 391

I think data here is not the data variable you want to use.

Using const will do the trick!

// Destructure your props like this
const { props } = this;

const data=[
   {
       'title':'name1',
       'content':props.data.content1
   },
   {
       'title':'name2',
       'content':props.data.content2
   },
]

Upvotes: 2

Related Questions