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.