How to access attribute of a function in another component in reactjs

Question

I want to get an attribute from a function within a component. The function is called checkbox.js:

export default function Checkboxes() {
  const [checked, setChecked] = React.useState(false);

  const handleChange = (event) => {
    setChecked(event.target.checked);
  };

  return (
    <div>
      <Checkbox
        checked={checked}
        onChange={handleChange}
        color="primary"
        inputProps={{ 'aria-label': 'primary checkbox' }}
      />
      </div>
  );
}

The component Checkbox multiple times in a table row. props.characterData is an array that has various attributes.

const TableBody = props => {
      const rows = props.characterData.map((row, index) => {
              return (
               <tr key={index}>
                 <td>
                   <Checkbox />
                 </td>
                 <td>{row.task}</td>
                 <td>{row.desc}</td>
               </tr>
                      )
            })
      return <tbody>{rows}</tbody>
}

What I want to do is to save the "checked" boolean value into the row.checked attribute every time it is changed, but nothing I have tried or searched up worked.

The row.checked comes from an array of characters where each character is initialized in the form:

{ task: '', desc: '', checked: false}

In the TableBody, it is mapped for each element in the array.

Any help would be greatly appreciated.

The `Checkbox` checked value/state is maintained internally, if you need it externally then you need to provide a callback function, or convert the `Checkbox` component to be a controlled input (i.e. the state is external and controls it). Can you update your question to include the `row.priority` logic? — Drew Reese, Feb 18 '21 at 07:23
Does this answer your question? [React Hook : Send data from child to parent component](https://stackoverflow.com/questions/55726886/react-hook-send-data-from-child-to-parent-component) — Anurag Srivastava, Feb 18 '21 at 07:26
I added the row.priority logic, but renamed it to row.checked. The react hook was helpful but as my checkbox is a function and my TableBody is a component and not a class rendering, I wasn't able to make it work. — Joshua von Damm, Feb 18 '21 at 07:43

score 1 · Accepted Answer · answered Feb 18 '21 at 08:00

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

const Checkboxes =({checked, cbOnChange})=> {
    const handleChange = (event) => {
        cbOnChange(event.target.checked);
    };
  
    return (
      <div>
        <Checkbox
          checked={checked}
          onChange={handleChange}
          color="primary"
          inputProps={{ 'aria-label': 'primary checkbox' }}
        />
        </div>
    );
  }

const TableBody = props => {
    const [checkboxValue, setCheckboxValue] = useState({})
    useEffect(() => {
        setCheckboxValue({})
    }, [JSON.stringify(props.characterData)])

    const handleChange =(index, checked)=>{
        setCheckboxValue((state)=>({
            ...state,
            [index]: checked
        }))
    }
    const rows = props.characterData.map((row, index) => {
            return (
             <tr key={index}>
               <td>
                 <Checkboxes cbOnChange={(checked)=> handleChange(index, checked)} checked={checkboxValue[index] || false}/>
               </td>
               <td>{row.task}</td>
               <td>{row.desc}</td>
             </tr>
                    )
          })
    return <tbody>{rows}</tbody>
}
export default TableBody

score 0 · Answer 2 · answered Feb 18 '21 at 08:29

you should write like this:

export default function App() {

  const [characterData , setCharacterData] = React.useState([{
id: 1,
priority : true,
task: "task1",
desc: "desc1"
  },
  {
    id: 2,
   priority : false,
   task: "task2",
 desc: "desc2"
  }])

  const handleChangePriority = (id , value) => {
    let cloneCharacterData = [...characterData]
    const selectData = characterData.filter(itm => itm.id === id)[0];
   const index = cloneCharacterData.findIndex(itm => itm.id === id)
   selectData.priority = value;
   cloneCharacterData[index] = selectData;
   setCharacterData(cloneCharacterData)
 }

  return (
     <div >
<TableBody characterData={characterData} handleChangeProps={handleChangePriority} />
   </div>
 );
}

TableBody:

 const TableBody = props => {
const rows = props.characterData.map((row, index) => {
        return (
         <tr key={index}>
           <td>
             <Checkbox  id={row.id} priority={row.priority} handleChangeProps={props.handleChangeProps} />
           </td>
           <td>{row.task}</td>
           <td>{row.desc}</td>
         </tr>
                )
      })
return <tbody>{rows}</tbody>
}

And Checkboxes:

    export default function Checkboxes({priority , handleChangeProps , id}) {
//   const [checked, setChecked] = React.useState(false);

  const handleChange = event => {
    // setChecked(event.target.checked);
    handleChangeProps(id , event.target.checked)
  };

 return (
   <div>
     <Checkbox
       checked={priority}
      onChange={handleChange}
       color="primary"
       inputProps={{ "aria-label": "primary checkbox" }}
     />
   </div>
 );
  }

How to access attribute of a function in another component in reactjs

2 Answers2