javascript - Components doesn't render a function called from render function -
i've been trying figure out why renderfilteredlist not render these list items (both of them include substring this.props.searchedword , console logs true, , renderfilteredlist called original render function).
{<li key={singleobject.body} classname="list-group-item">{singleobject.body}</li>} {<li key={singleobject.name} classname="list-group-item">{singleobject.name}</li>}
and couldn't figure out why, can tell me wrong code please?
renderfilteredlist(){ console.log('the data fetch is: ', this.props.datafetched, 'and searchedword is: ', this.props.searchedword); return this.props.datafetched.map(objects=>{ return objects.map(singleobject=>{ console.log(singleobject.body.includes(this.props.searchedword), singleobject.name.includes(this.props.searchedword)); <div> {<li key={singleobject.body} classname="list-group-item">{singleobject.body}</li>} {<li key={singleobject.name} classname="list-group-item">{singleobject.name}</li>} <hr/> </div> }) })
you have return <div>
within map function. right returning nothing.
i'm assuming calling method within return of render method. if calling returning nothing render, you'll still not display.
renderfilteredlist(){ console.log('the data fetch is: ', this.props.datafetched, 'and searchedword is: ', this.props.searchedword); return this.props.datafetched.map(objects => { return objects.map(singleobject => { console.log(singleobject.body.includes(this.props.searchedword), singleobject.name.includes(this.props.searchedword)); return ( <div> {<li key={singleobject.body} classname="list-group-item">{singleobject.body}</li>} {<li key={singleobject.name} classname="list-group-item">{singleobject.name}</li>} <hr/> </div> ); }); }); }
Comments
Post a Comment