Send initial value to parent component

Use useEffect() function in your child component.

useEffect(() => {
    onSelect(selectedValue);
}, []);

New code :

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const data = [23, 57, 92];

  const [selected, setSelected] = useState(null);

  function handleSelect(selected) {
    setSelected(selected);
  }

  return (
    <div className="App">
      <h1>Selected is: {selected}</h1>
      <Child data={data} onSelect={handleSelect} />
    </div>
  );
}

function Child({ data, onSelect }) {
  const [selectedValue, setSelectedValue] = useState(Math.max(...data));

  useEffect(() => {
    onSelect(selectedValue);
  }, []);

  function handleChange(e) {
    onSelect(e.target.value);
  }

  return (
    <div>
      <select
        onChange={handleChange}
        defaultValue={selectedValue}
        name="test"
        id="test"
      >
        {data.map((number, i) => {
          return (
            <option key={i} value={number}>
              {number}
            </option>
          );
        })}
      </select>
    </div>
  );
}

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top