Currently i am new to MERN and i want to show the button present after the user clicks the P button in a list.

For Example like this

But the problem is after clicking p , present is showing but present is showing in all of the list and i want to show the present button only where i click. The p and A should be hide

Is this possible? how can i do correction in this code

My code

import React, { useEffect, useState } from 'react'

const Contracter = () => {

    const [ispresentVisible, setIspresentVisible] = useState(false);
  

    return (
        <>
        <ol >

                                            {
                                                smember.map((item, i) => (

                                                    <li >
                                                        <div >

                                                            <NavLink onClick={() => { getmemberid(item.PM_id) }} className="text-decoration-none"><div >{item.member}</div></NavLink>


                                                        </div>
                                                        <button data-value1={"present"} data-value2={"1"} onClick={(e) =>{  setIspresentVisible(!ispresentVisible) }} className='btn btn-success me-3'>P</button>
                                                        <button data-value1={"absent"} data-value2={"0"} onClick={(e) => { tomakeabsent(e, item.PM_id, item.project_id) }} className='btn btn-danger '>A</button>
                                                        {
                                                            ispresentVisible &&
                                                            <button className='btn btn-success ms-2'>Present</button>
                                                        }
                                                        
                                                    </li>
                                                ))
                                            }
                                        </ol>
        </>
    )
}

export default Contracter

Thankyou

.

I tried the above code and i expecting to show the present button after clicking the P button

CodePudding user response：

you should user array in ispresentVisible state like following I and using present state as array of indexes of students. or you can user item.id instead of index i

import React, { useEffect, useState } from 'react'

const Contracter = () => {

const [present, setPresent] = useState([]);


return (
    <>
    <ol >

                                        {
                                            smember.map((item, i) => (

                                                <li >
                                                    <div >

                                                        <NavLink onClick={() => { getmemberid(item.PM_id) }} className="text-decoration-none"><div >{item.member}</div></NavLink>


                                                    </div>
                                                    <button data-value1={"present"} data-value2={"1"} onClick={(e) =>{  setPresent(prev=>[...prev, i]) }} className='btn btn-success me-3'>P</button>
                                                    <button data-value1={"absent"} data-value2={"0"} onClick={(e) => { tomakeabsent(e, item.PM_id, item.project_id) }} className='btn btn-danger '>A</button>
                                                    {
                                                        present.includes(i) &&
                                                        <button className='btn btn-success ms-2'>Present</button>
                                                    }
                                                    
                                                </li>
                                            ))


                                          }
                                        </ol>
        </>
    )
  }

   export default Contracter

CodePudding user response：

you will need a map to define each component state here is an easy to understand example read it and solve your problem:

function App() {

  const [visibleStore, dispatchVisibleStore] = useState(() => new Map<string, boolean>())

  return (
    <ol>

      {
        [1, 2, 3, 4].map(item => {
          if (visibleStore.get(item   '') === false) return undefined
          return (
            <li key={item}>
              {item}
              <button
                onClick={() => dispatchVisibleStore(new Map(visibleStore.set(item   "", false)))}
              >hide</button>
            </li>
          )
        })
      }
    </ol>
  )
}