Conditional rendering in react-list items

Question

i'm trying make conditional rendering in react list item but it's not working:

here is what i tried:

this is my state:

menuItems: [
        {
          title: "Home",
          partly: false,
          icon: home,
          route: '/'
        }
....
      ]

here is my list in jsx:

render() {
    return (
{this.state.menuItems.map(item => (
             <NavLink
             className={
               item.partly
                 ? "content--item item-partly"
                 : "content--item"
             }
             onMouseEnter={() => this.showPartly(item)}
             onMouseLeave={() => this.hidePartly(item)}
             to={item.route}
           >
             <p>{item.title}</p>
           </NavLink>
          ))}
      )
}

and here is my onMouseEnter and onMouseLeave events:

showPartly = item => {
    this.setState(prevState => {
      let item = Object.assign({}, prevState.item);  
      item.partly = true;                        
      console.log(item.partly)           
      return { item }; 
    })
}

 hidePartly = item => {
    this.setState(prevState => {
      let item = Object.assign({}, prevState.item);  
      item.partly = false;                        
      console.log(item.partly)           
      return { item }; 
    })
}

i can see on console true and false when events work. But it's not affect to dom so my classname not changes.

Where i mistake?

First of all add a key prop to your NavLink inside the map — Emanuele Scarabattoli
– Emanuele Scarabattoli, Commented Jul 28, 2019 at 8:44
Do you have item & menuItems a separate state? Post you somplete state. — ravibagul91
– ravibagul91, Commented Jul 28, 2019 at 8:46
there is my complete state. i don't have item like a seperate state — user3348410
– user3348410, Commented Jul 28, 2019 at 8:47
I think the problem is that your return an object inside of an object. Try this: return {...item } — Almog Gabay
– Almog Gabay, Commented Jul 28, 2019 at 8:52

Nik · Accepted Answer · 2019-07-28 08:48:06Z

1

You are setting up the only item, so your state looks like:

{
 menuItems: [{}, {}, {}],
 item: {}
}

I'd rather set up the new menuItems array to the state, or even check partly in another field.

The way, which modifies menuItems:

showPartly = item => {
    this.setState(prevState => {
       return {
         menuItems: prevState.menuItems.map(
           current => current === item ? {...current, partly: true} : current
         ),
       };
    })
}

 hidePartly = item => {
    this.setState(prevState => {
       return {
         menuItems: prevState.menuItems.map(
           current => current === item ? {...current, partly: false} : current
         ),
       };
    })
}

And the way with the separated field in the state:

render() {
    return (
{this.state.menuItems.map(item => (
             <NavLink
             className={
               this.state.partly === item
                 ? "content--item item-partly"
                 : "content--item"
             }
             onMouseEnter={() => this.showPartly(item)}
             onMouseLeave={() => this.hidePartly(item)}
             to={item.route}
           >
             <p>{item.title}</p>
           </NavLink>
          ))}
      )
}
// ...

showPartly = item => {
  this.setState({partly: item});
}

 hidePartly = item => {
   this.setState({partly: null});
 }

Important thing: in the second variant you can have only one partly item

answered Jul 28, 2019 at 8:48

Nik

2,2921 gold badge18 silver badges21 bronze badges

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

1 Comment

user3348410 Over a year ago

Thank you so much it's worked and i understand problem

Collectives™ on Stack Overflow

Conditional rendering in react-list items

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related