CODEWITHSUNDEEP
reactjsreact-hooks
izengod
izengod

Reputation: 1156

React hooks set functions not working from child component

I've a isView and setIsView in the ParentComponent and passing them down to the ChildComponent as props and trying to do show/hide conditional rendering but setIsView seems not to be working and isView value in the props remains same.

const ParentComponent = props => {
    const [isView, setIsView] = useState(true);

    const onChange = selectedOption => {
        selectedOption === 'Report'
            ? setIsView(true)
            : setIsView(false);
    };

    return (
        <div>
          <ChildComponent
             isView={isView} 
             onChange={onChange}
           />
        </div>
    );
};

const ChildComponent = props => {
    const {isView, onChange} = props;

    return (
        <div>
          <RadioButton 
             onChange={() => onChange('Not-Report')}
           />

           <If condition={isView}>
               <ChildComponent2>
           </If>
        </div>
    );
};

Edit: changed onChange={onChange('Not-Report')} to onChange={() => onChange('Not-Report')} as suggested by some. still not working.

Upvotes: 1

Views: 513

Answers (3)

A.R.SEIF
A.R.SEIF

Reputation: 873

i am wrote this code
ParentComponent

const ParentComponent = (props) => {
  const [isView, setIsView] = useState(true);

  const onChange = (selectedOption) => {
    console.log("selectedOption = ", selectedOption);
    selectedOption === "Report" ? setIsView(true) : setIsView(false);
  };

  return (
    <div>
      <ChildComponent isView={isView} onChange={onChange} />
    </div>
  );
};

ChildComponent

const ChildComponent = (props) => {
  const { isView, onChange } = props;

  return (
    <div>
      <input
        type="radio"
        checked={isView}
        onClick={() => {
          onChange("Not-Report");
        }}
      />
      isView = {isView ? "true" : "false"}
    </div>
  );
};

i change onChange to onClick and use checked

Work Demo

CodeSandbox

Upvotes: 0

wangdev87
wangdev87

Reputation: 8751

Update child component onChange function as follows:

<RadioButton 
  onChange={() => onChange('Not-Report')}
/>

If you pass onChange only, it will be regarded with the function that has event as a parameter rather than the prop's onChange function.

To make it work like your way,

const ChildComponent = ({isView, onChange}) => {
    const onRadioChange = () => {
       onChange('Not-Report')}
    }

    return (
        <div>
          <RadioButton 
             onChange={onRadioChange}
           />

           <If condition={isView}>
               <ChildComponent2>
           </If>
        </div>
    );
};

Upvotes: 1

Shawn Yap
Shawn Yap

Reputation: 969

Try feeding the onChange method as a callback function instead.

const ChildComponent = props => {
    const {isView, onChange} = props;

    return (
        <div>
          <RadioButton 
             onChange={() => onChange('Not-Report')} // <- Here
           />

           <If condition={isView}>
               <ChildComponent2>
           </If>
        </div>
    );
};

Upvotes: 1

Related Questions