Conditional rendering inside map function ReactJs

Question

I know there's similar thread already but i'm a total newbie and i can't work it. I'm not able include conditional rendering after my map function, do i need some sortf of HTML-tag inbetween?

     const renderTableData = () => { 
    let id = 1;
    const activeButton = () => { 
    
    }
    return (
      <tr>
        {days.map((val) => (
            <td>
                 {timeSlot.map((n, i) => ( 
                    
                //     if(freeSlotsList.includes(id)){     THIS CODE SNIPPET
               //         return (<h1>Testing</h1>           DON'T WORK
              //          )}
                    
                 
              <button id={id++} className={activeButton}> {n} {id}</button> 
                 ))}
            </td>
        ))}
      </tr>
    );
  };

EDIT:

i can't seem to access my freeSlotsList, it looks like this

const [freeSlotsList, setFreeSlotsList] = useState([])

useEffect(() => {
Axios.post('http://localhost:3001/api/get/week1/ex').then((response) => {
    setFreeSlotsList(response.data)

    
  })
}, [])

Maulik Shah · Accepted Answer · 2022-07-02 17:19:44Z

1

Try this, You need to wrap your code into {} if you want to write js code. As () will simply return that as jsx.

const renderTableData = () => { 
let id = 1;
const activeButton = () => { 

}
return (
  <tr>
    {days.map((val) => (
        <td>
             {timeSlot.map((n, i) => {
                
                 if(freeSlotsList.includes(id)){     
                    return (<h1>Testing</h1>         
                    )}
                
             
          return <button id={id++} className={activeButton}> {n} {id}</button> 
             )}}
        </td>
    ))}
  </tr>
);
};

answered Jul 2, 2022 at 17:19

Maulik Shah

1,0501 gold badge8 silver badges18 bronze badges

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

9 Comments

Max Andersson Over a year ago

That's probably it! altough i can't display my button this way. Is there any way to circumvent that?

Maulik Shah Over a year ago

Probably there is some mismatch in closing brackets. And please wrap button in ( ).

Max Andersson Over a year ago

Ahh i found it, was )}} when it should've been })}.

Max Andersson Over a year ago

I still can't access timeSlot a useState([]) inside the function, do you have any clue as to why?

Maulik Shah Over a year ago

How timeSlot is being set? I guess you are referring wrong variable. Or add more description for that.

|

Collectives™ on Stack Overflow

Conditional rendering inside map function ReactJs

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related