Parent to Child

Example

The parent owns the state and passes it down as props. When the parent state changes, the child re-renders with new props.

import { useState } from 'react';

function Display({ value }) {
  return <h2>Value from parent: {value}</h2>;
}

export default function App() {
  const [value, setValue] = useState(1);
  return (
    <div>
      <Display value={value} />
      <button onClick={() => setValue(value * 2)}>Double in parent</button>
    </div>
  );
}

Result