Update component when prop value changes

Question

I have an object with the property home.ready = false. When the object is done getting data, cleaning it etc it changes to home.ready= true.

I need my component to register the change and update. My component:

 class HomeNav extends React.Component { render() { let data = this.props.data; let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort(); let tabs = uniqueTabs.map((tab, index) => { let itemsByTab = _.filter(data, (x => x.tab == tab)); return <Tabs key={tab} tab={tab} index={index} data={itemsByTab} />; }); console.log(this.props) return ( <section> <div className="wb-tabs"> <div className="tabpanels"> { this.props.ready ? {tabs} : <p>Loading...</p> } </div> </div> </section> ) } }; ReactDOM.render( <HomeNav data={home.data.nav} ready={home.ready}/>, document.getElementById('home-nav') );

This is the home object. It's a simple object that gets data and once the data is ready the property ready changes from false to true. I can't get React to recognize that change. And at times React will say home is undefined.

Not sure what you want. If you pass ready as a prop to your component it should update automatically if its value changed. It should be your container component that gets the data and set the home.ready which then passes it down to HomeNav. — r0dney
– r0dney, Commented Jul 28, 2016 at 20:32
There is nothing in this code sample called home. Include the code that passes the prop! — A. Vidor
– A. Vidor, Commented Jul 28, 2016 at 21:40
@this-vidor home is an object in another script. The default value of home.ready is false and when my data is retrieved it's changed to true. This is the home object is you want to see it: github.com/simkessy/sharepoint-projects/blob/master/… — Batman
– Batman, Commented Aug 2, 2016 at 19:00

Hugo Silva · Accepted Answer · 2016-07-28 23:03:02Z

Since you didn't post any code around the request, or data formatting, I will assume you got all that figured out. So, for your component to work the way it is currently written, you need to drop the curly braces around tabs ({ this.props.ready ? tabs : <p>Loading...</p> }), then, this.props.data should always contain a valid Array, otherwise it will break when you try to sort, filter, etc.

Or, you can do an early dropout, based on the ready property:

class HomeNav extends React.Component { render() { if(!this.props.ready){ return <section> <div className="wb-tabs"> <div className="tabpanels"> <p>Loading...</p> </div> </div> </section> } let data = this.props.data; let uniqueTabs = _.uniq(_.map(data, x => x.tab)).sort(); let tabs = uniqueTabs.map((tab, index) => { let itemsByTab = _.filter(data, (x => x.tab == tab)); return <Tabs key={tab} tab={tab} index={index} data={itemsByTab} />; }); console.log(this.props) return ( <section> <div className="wb-tabs"> <div className="tabpanels"> {tabs} </div> </div> </section> ) } };

The request and data formatting happens outside of React. I'm using a object to retrieve and parse the data. So I have to work around making sure that React waits for that object to be ready and being able to determine when changes have been made, like home.ready
@Batman: Sorry, I didn't get your point. I understand what you are saying, that is actually a pretty common case, I just can't see what you are having problems with. Could you please clarify?

Collectives™ on Stack Overflow

Update component when prop value changes

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related