React data down, action-up, pass state variable-CodePudding

I want to pass a state variable to another component but i don't get it what i'm doing wrong.

I have a component for radio inputs and I need to pass that taskLabel to Form component to use it in submitHandler function.

This is ( https://codesandbox.io/s/icy-waterfall-yb8knl?file=/src/components/task-label/index.js:761-778 ) what I tried, but now i'm getting that error, setTaskLabelProps is not a function.

CodePudding user response：

in your form component you can try this to remove the error

<TaskLabel taskLabelProps={taskLabelProp} setTaskLabelProps={setTaskLabelProp} />

or if you wanna preserve your original code you can change task-label component because you are passing all the props in the label prop name

<TaskLabel label={{ taskLabelProp, setTaskLabelProp }} />

So in the task-label component you should use the label key to access the setTaskLabelProp like this

const TaskLabel = ({ label }) => {
  return (
    <div>
      <input
        
        type="radio"
        name="label"
        value="urgent"
        onChange={(e) => label.setTaskLabelProp(e.target.value)}
      />
      <input
        
        type="radio"
        name="label"
        value="med"
        onChange={(e) => label.setTaskLabelProp(e.target.value)}
      />
      <input
        
        type="radio"
        name="label"
        value="red"
        onChange={(e) => label.setTaskLabelProp(e.target.value)}
      />
      <input
        
        type="radio"
        name="label"
        value="sdsd"
        onChange={(e) => label.setTaskLabelProp(e.target.value)}
      />
    </div>
  );
};