How to get parent div in handleChange with React

user_18170841 0
Viewed 55

I have multiple divs that are dynamic (it depends on which filter the visitor checked). So I can not use getElementById.

I need to get the parent div to change its CSS if an input is checked.

Here is my code:

            {workout?.map(x => {
                return <div className='relative bg-gray-200 p-4 rounded-md my-3 mx-2' key={x.name}>
                    <input onClick={handleChecked} className='absolute right-0 top-0' type="checkbox" />
                    <div className='flex'>
                        <img className='w-2/6 rounded mr-5' src={`${x.path}`} alt={x.name} />
                        <div className='w-4/6'>
                            <h2 className='text-xl'>{x.name}</h2>
                            <p>Nombre de séries : {x.set}</p>
                            <p>Nombre de rép : {x.reps}</p>
                            {x.secondary ? <p>Muscles solicités : <br />
                                <span className='space-x-2'>
                                    {x?.secondary?.map(k => {
                                        return <span className='bg-white px-1 rounded-md' key={k}>{k}</span>
                                    })}
                                </span>
                            </p> : null}
                        </div>
                    </div>
                </div>
            })}

The idea, is to add a border-2 border-teal-500 class to the parent div of the input when it is checked.

Here is my handleChecked:

  function handleChecked(e) {
    // code here
  }

I saw that I had to use parentNode but the problem is, I can't store in a variable the current input because it is dynamic. Every item has its own input.

Any idea how I can handle this?

tailwind-css reactjs javascript
1 Answers

You shouldn't be using getElementById (or any other vanilla JS DOM method) in React anyway - store and change values in state instead. You can leverage this by making input a controlled component, and storing the checked values in an array, or in workout - then, when returning the JSX, you just need to check whether the x variable (the item being iterated over) indicates that the current input should be checked or not - which will also tell you whether the parent should have a different class.

const makeHandleChecked = (i) => (e) = {
  setWorkout(
    workout.map(
      (w, j) => j !== i ? w : { ...w, checked: e.target.checked }
    )
  );
};

{workout?.map((x, i) => (
  <div className={`relative bg-gray-200 p-4 rounded-md my-3 mx-2${x.checked ? ' checked' : ''}`} key={x.name}>
    <input onClick={makeHandleChecked(i)} checked={x.checked} className='absolute right-0 top-0' type="checkbox" />
user_95152070
Related