passing just the index clicked to the prop-CodePudding

I have a parent component rendering a list of roles when i click edit i only want my selected index to pass through to show with the child component pop up

currently I get the whole list of data roles[] when toggleOpenEdit i would like the roles[0] and so forth to be shown only

I tried toggleOpenEdit(index) in the onclick but then it says expected 0 arguments got 1 ... what am i missing??

 PARENT 
 const roles = [
 {role: 'Admin', created_on: '1/1/2019', status: "active", permissions: "add order, 
 update order" },
 {role: 'Admin II', created_on: '12/1/2019', status: "active", permissions: "add order, 
 update order, delete order, refund" },
 {role: 'Support', created_on: '2/1/2021', status: "active", permissions: "edit order, 
 update order" },
 {role: 'Support II', created_on: '10/15/2020', status: "inactive", permissions: "add 
 order, update order, some other thing" },
 {role: 'Owner', created_on: '1/1/2019', status: "active", permissions: "add order, 
 update order, change inventory, refund, delete, remove users" },
]


 export default function accounts() {
const [openEdit, setOpenEdit] = useState(false);
const toggleOpenEdit = () => {  setOpenEdit(!openEdit)};

return (
          <table className="min-w-full divide-y divide-gray-300">
      
            <tbody className="divide-y divide-gray-200 bg-white">
              {roles.map((role, index) => (
                <tr key={index}>
                 <td className=" whitespace-nowrap  text-sm font-medium ">
                    <DotsVerticalIcon
                    onClick={toggleOpenEdit.bind(index)}
                    className={'text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500'}
                    aria-hidden="true"
                    />
                  </td> <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font- 
                 medium text-gray-900 sm:pl-6">
               {roles.role}
                  </td>
                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
              {role.created_on}</td>
                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
              {role.status}</td>
                  <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500"> 
              {role.permissions}</td>

                </tr>
              ))}
            </tbody>
          </table>
      
    <div className={"columns-1 mx-5"}>  
     ** child -> ** {openEdit ? <Edit roles={roles}/> : null }</div>
  </div>   
 
 </div>
 </Theme>
 )
}

Child component ____

  <div className=" mt-2 transform px-2 sm:px-0">
    <div className="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 overflow- 
 hidden">
    
      <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
          <h2>Edit User</h2>
         

          <div className="-m-3 p-3 block rounded-md hover:bg-gray-50" >
            <p className="text-base font-medium text-gray-900">{roles.role}</p>
            <p className="mt-1 text-sm text-gray-500">{roles.created_on}</p>
            <p className="mt-1 text-sm text-gray-500">{roles.status}</p>
            <p className="mt-1 text-sm text-gray-500">{roles.permissions}</p>
          </div>
      
      </div>
     </div>
    </div>

CodePudding user response：

The short answer to your question is that you need to pass a single role to props with something like roles[i]. So that means you need to have a way to pass the correct index to use. It looks like you are trying to do so with onClick={toggleOpenEdit.bind(index)}, but toggleOpenEdit does not take any arguments, so index is just ignored here. You will need to find a way to fix this to keep track of which index to use. Most likely this will require state so that when the component is rendered again, it renders with the correct role.

CodePudding user response：

       const [openEdit, setOpenEdit] = useState(undefined);                    

               <DotsVerticalIcon
                onClick={(index) => setOpenEdit(index)}
                className={`text-gray-400 ml-2 h-5 w-5 group-hover:text-gray-500`}
                aria-hidden="true"
                />

 ** child -> ** { <Edit roles={openEdit ? roles.[openEdit] : {}}/> }</div>

Not really sure if this is the answer you are looking for but :

We pass the current clicked role from the roles.map( .... ) initiali it is undefined since we dont want to show anything on load . And you dont need the .bind() this is used in class components