React not displaying json on table

Question

I've been trying to display my response data from nodejs in a tabluar format on react. But for some reason I am not able to render the table or the data no matter which sources I try from. So please help me out.

  <Select
            className='SelectTeam'
            closeMenuOnSelect={true}
            components={animatedComponents}
            isMulti={false}
            options={teams}
            name='team'
            onChange={handleSelect}
          />
          <br />
          <table className='dvTable'>
      <thead className='DVthead'>
        <tr className='DVtr'>
        <th className='DVth'>Name</th>
          <th className='DVth'>Team</th>
          <th className='DVth'>Preference</th>
          <th className='DVth'>Taken</th>
        </tr>
      </thead>
      
      {data?.map((el => {
          <>
          {el.team==team?
       <tbody>
        <tr className='DVtr' >
        <td className='DVtd'> {data.name} </td>
        <td className='DVtd'> {data.team} </td>
        <td className='DVtd'> {data.preference} </td>
        <td className='DVtd'> {data.taken} </td>
      </tr>

</tbody>

:''   }
</>

}))      
} 

my axios:

const viewData = async(e) =>{
        setLoading(true)
        axios({
          method:'get',
          url: myurl,
            headers: {
              "Content-type": "application/json"
            },
        }).then(response => {
          const result = response.data.rows;
          console.log(result);
          setData(result)
          console.log(data);

          console.log(data?.map(el => el.team));
        })
        setLoading(false)
    }

result:

(4) [{…}, {…}, {…}, {…}]
0
: 
date
: 
"2022-12-26T00:00:00.000Z"
id
: 
"69"
name
: 
"Prajwal V"
phone
: 
"990*******0"
preference
: 
"NON-VEG"
taken
: 
false
team
: 
"Greeters"
[[Prototype]]
: 
Object
1
: 
{id: '70', name: 'Amulya', phone: '636*******', preference: 'NON-VEG', team: 'Greeters', …}
2
: 
{id: '72', name: 'Murali', phone: '81********', preference: 'NON-VEG', team: 'Cleaning', …}
3
: 
{id: '74', name: 'Nimisha ', phone: '98*********', preference: 'VEG', team: 'Cleaning', …}

What I want to do is to display the rows stored in 'data' if 'data.team' == 'Select.team'. I want to display the rows according to the selection of the team selected by the user. I'm mostly trying to make a custom filter in simple words. Thank you so much for helping out.

Answer 1

Thank you for taking the time to review my question. I found a way to render and it worked for me.

here is the code:

{fetched?
<>
  <Select
            className='SelectTeam'
            closeMenuOnSelect={true}
            components={animatedComponents}
            isMulti={false}
            options={teams}
            name='team'
            onChange={handleSelect}
          />
          <br/>
          </>:
          <>
           {loading ? <CircularProgress /> : 
  <button type="" onClick={viewData}>Refresh</button>
}
</>}
  
          <table className='IvTable'>
      {fetched?
      <thead className='IVthead'>
        <tr className='IVtr'>
        <th className='IVth'>Name</th>
          <th className='IVth'>Team</th>
          <th className='IVth'>Preference</th>
          <th className='IVth'>Taken</th>
        </tr>
      </thead>
      :''}
      
      {data?.map((el, index) => (
          <tbody>
        {el.team==team ?
       
        <tr className='IVtr' key={index}>
        <td className='IVtd'> {el.name} </td>
        <td className='IVtd'> {el.team} </td>
        <td className='IVtd'> {el.preference} </td>
        <td className='IVtd'> {el.taken} </td>
      </tr>



:''   }
</tbody>

))} 
      
    </table>