React, Divs inside ternary condition are not rendering

Question

in one of my react components there is a method called "buildRow()", which loops through list of objects and renders the div with the corresponding data. For example if I have 600 objects in the list and I loop through it with map, all the divs will be rendered on the page with their own title etc.

For example, the below code with render about 600 divs on my page, each with its own corresponding data.

 buildRow() {
     return (
   this.state.posts.map(events =>
       <div key={events.key} className='result_box'
              onClick={ () => this.click(events.name, events.description, 
              events.time)} id={events._id}>

               <p>{events.name}</p>
               {events._id}
               {events.place && events.place.location && <p>
               {events.place.location.city}</p>}
       </div>
   )
  )};

Now, I want to implement a search filter function. Where I only want to return divs with a specific data parameter. For example, if I type 'Austin' in the search box, only divs with the data 'Austin' at its location will be rendered. The code for this is below:

  buildRow() {
    return (
    this.state.posts.map(events =>
      {events.place &&
        events.place.location &&
        this.props.searchVal === events.place.location.city ?
           <div key={events.key} className='result_box'
              onClick={ () => this.click(events.name, events.description, 
              events.time)}
              id={events._id}>

             <p>{events.name}</p>
             {events._id}
             {events.place && events.place.location && <p>
             {events.place.location.city}</p>}
           </div>
         : console.log(this.props.searchVal)
      }
    ) 
  )
}

What I am trying to do is filter and only render divs that match the search criteria by using the ternary operator. However, this does NOT render the divs. Interestingly however, the ternary operation works as expected. For example, if I type in 'Austin' and there are 5 matching results for 'Austin', and lets say we have 600 objects, the console.log will only hit 595 times. I even tested it out where I console.log inside of the success condition, and those logs show! It appears that when it comes to rendering the divs, its not happening. Can anyone help me out?

Answer 1

It looks like the map callback isn't actually returning a value (because the expression has been put into braces). You may want to do something like this:

buildRow() {
    return this.state.posts
        .filter(events => 
            events.place 
            && events.place.location
            && events.place.location.city === this.props.searchVal)
        .map(events => 
            <div key={events.key} className='result_box'
                onClick={() => this.click(events.name, events.description, 
                events.time)}
                id={events._id}>

                <p>{events.name}</p>
                {events._id}
                <p>{events.place.location.city}</p>
            </div>);
}