Update the state in parent with onclick in CHild in React

Question

I have a state in parent component which i want to update it from onClick in the child component, but it is not updating what is wrong here?

Another Problem I want to show a popup when the user click in one of the radio button. And i have different popup messages for each radio button. I am using the index to show this popup. But how can i tell the child component to show this clicked popup?

Parent

 const [showPopup, setShowPopup] = useState(false);
  const [activeIndex, setActiveIndex] = useState(-1);

 return (
    <div>
      {options?.map((option,index) => (
        <RadioBtn
          key={index}
          onChange={radioButtonChangeHandler}
          label={option.label}
          value={option.value}
          showPopup={showPopup}
         activeIndex={activeIndex}
          onClick={() => {
            setShowPopup(curr => !curr);
            setActiveIndex(index);
          }}
        />
      ))}
    </div>
  );

Child

const popupMessage = (<div>{infoContent</div>);
 
return (
    <div className={clsx("radio-button", infoContent && "has-info")}>
      <Popup open={showPopup}>
        <PopupPositionReference>
          <div className="radio-button-popup-icon onClick={props.onClick}>
            <input
              ref={iRef => {
                ref(iRef);
                inputRef.current = iRef;
              }}
              type="radio"
              checked={isChecked}
              {...props}
              {...rest}
            />
            <label htmlFor={id}>
              {label}
            </label>
          </div>
        </PopupPositionReference>
        {popupMessage && <PopupContent>{popupMessage}</PopupContent>}
      </Popup>
    </div>
  );

CSS

.radio-button {
  &.has-info {
    .radio-button-popup-icon {
      position: relative;

      &::after {
        content: " ";
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        height: 25px;
        background-image: url(...);
        background-position: right;
        background-size: contain;
      }
    }
}
``

Does this answer your question? [How can I update the parent's state in React?](https://stackoverflow.com/questions/35537229/how-can-i-update-the-parents-state-in-react) — shanmukha vangaru, Mar 15 '23 at 08:26

Disco · Accepted Answer · 2023-03-15T10:54:42.597

3

You need to call the setShowPopup properly.

If you want to toggle the state

onClick={() => setShowPopup((curr)=> !curr)}

If you just want to set it to true

onClick={() => setShowPopup(true)}

Second issue

You can use the index in the showPopup prop

showPopup={showPopup && index === activeIndex}

You could probably even get rid of the showPopup state, depending on how the popup works

showPopup={index === activeIndex}

If you always want to show the popup of the checked radio you could even get rid of the activeIndex state and the showPopup prop in the child component and just use isChecked

<Popup open={isChecked}>

Final solution

Keep it simple, since we no only want to show the popup on a click on a icon. We can remove all states and just add the popup and icon next to the radio button. Based on what package you use for the popupit should be able to open and close the popup on click on the icon without a external state needed.

<input
 type="radio"
checked={isChecked}
/>
{popupMessage && <Popup>
  <PopupPositionReference>
    <YourIconHere />
  </PopupPositionReference>
   <PopupContent>{popupMessage}</PopupContent>
</Popup>}

edited Mar 15 '23 at 10:54

answered Mar 15 '23 at 08:12

Disco

1,304
1
6
12

Thanks for your help :). I updated the question with another problem can you help me in that? – TSDev Mar 15 '23 at 08:51
I think that you have to update the question again, the `Child` code seems to be broken. Could you elaborate a bit mor about what the second issue really are? – Disco Mar 15 '23 at 09:01
i updated the child component, the problem is that i want to click on the radio button to show its corresponding popup message. I used the index state but i don't know how to check this index to show the required popup message. – TSDev Mar 15 '23 at 09:07
See updated answer, its always recommended to try to use as few states as possible and keep the states as close to where they are used. – Disco Mar 15 '23 at 09:44
Thanks again :) I have one more question, if i have an icon after this radio button and i want the popup to be shown only `onClick` of this icon not in the radio button itself, what i have to change in the code now?. I added the icon as a css `::after` – TSDev Mar 15 '23 at 10:43
In that case just add the icon and popup separately from the input no need to do it the hard way by altering css. – Disco Mar 15 '23 at 10:55

Update the state in parent with onclick in CHild in React

1 Answers1

Second issue

Final solution