Components doesn't render a function called from render function

Question

I've been trying to figure out why renderFilteredList does not render these list items (both of them include the substring this.props.searchedWord and the console logs true, and renderFilteredList is called from the 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 I couldn't figure out why, can anyone tell me what is wrong with my code please?

renderFilteredList(){
    console.log('the data to fetch is: ', this.props.dataFetched, 'and the 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>
             })
    })

JD Hernandez · Accepted Answer · 2017-09-12 16:30:17Z

1

You have to return the <div> within the map function. Right now you are returning nothing.

I'm also just assuming that you are calling this method within the return of your render method. If you are simply calling it but returning nothing from render, you'll still not get anything to the display.

renderFilteredList(){
  console.log('the data to fetch is: ', this.props.dataFetched, 'and the 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>
      );
    });
  });
}

edited Sep 12, 2017 at 16:30

JD Hernandez

1,9251 gold badge22 silver badges30 bronze badges

answered Sep 11, 2017 at 21:39

Jake Haller-Roby

6,4381 gold badge21 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Components doesn't render a function called from render function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related