Pass input to React sibling

I’m having trouble passing data between two React siblings. I need to have an input component that will receive and pass the input to sibling that will handle the input and perform some logic.

I get to receive the data in the parent, but I cannot seem to get the passing to the sibling to work…

This is the wrapper/parent

  const [corpBrandId, setCorpBrandId] = useState("");
  const [secondInput, setSecondInput] = useState("");
  const handleCorpBrandIdChange = ({ target }) => {
    setCorpBrandId(target.value);
  };
  const handleSecondInputChange = ({ target }) => {
    setSecondInput(target.value);
  };
  const handleClick = () => {
    // console.log(corpBrandId);
    // console.log(secondInput);
  };
  
  return (
    <div className="App">
          <InputField
            label="Corporate brand ID "
            onChange={handleCorpBrandIdChange}
            value={corpBrandId}
          />
          <TableConnect corpBrandId={corpBrandId} secondInput={secondInput} />
          <InputField
            label="Second input param"
            onChange={handleSecondInputChange}
            value={secondInput}
          />
          <button onClick={handleClick}>Click me</button>
    </div>
  );
}
export default MainWrapper;

And here’s the input component:

  return (
    <div>
      <label>{label}</label>
      <input type="text" value={value} name={name} onChange={onChange} />
    </div>
  );
};

export default InputField; 

I’ve got no working or remotely close code how to receive the data… This doesn’t work in the sibling:

        return (
            <div>
                Test
                {props.corpBrandId}
                {props.secondInput}
            </div>
        );
    }

Anyone got any idea?

Answer

Based on your comment to @Shahar’s answer, it sounds like you maybe haven’t defined props in your TableConnect component. It should look something like this:

const TableConnect = (props) => {
  return (
    <div>
      Test
      {props.corpBrandId}
      {props.secondInput}
    </div>
  );
};

Here’s a codesandbox where TableConnect is correctly receiving the input from your input fields: https://codesandbox.io/s/throbbing-cloud-wgub8?file=/src/App.js