How to change variables in React with two connected components

Question

I am currently working in React with two files. File A(upper component) is written in function type React and File B(Lower component) is written in Class type React and they have variable X in common.

The question is how to change state of variable value using input tag at file B.

function A() {

  const [open,setOpen] = useState(false);
  const[value,setValue] = useState('');

  const onChange=e=>setValue(e.target.value);

  return (
          <B />
} 


class B extends Component {
  
  render() {
    };
    return (       
          <input
            value={this.state.keyword}
          />

I just started studying, so I hope there is a detailed explanation and code. Thank you

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) — Avinash Thakur, Jun 27 '21 at 06:34

score 0 · Answer 1 · answered Jun 27 '21 at 06:47

Check this out.

const A = () => {
  const [open,setOpen] = useState(false);
  const [value,setValue] = useState('');

  const onChange = e => setValue(e.target.value);

  return (
     <B onChange={onChange} value={value}/>
  )
} 


class B extends Component {
  render() {
    return (       
      <input value={this.props.value} onChange={this.props.onChange}/>
    )
}

How to change variables in React with two connected components

1 Answers1