this is kind of an update from a previous post. I’ve simplified things a little, I have a Search component as the parent and a Select component as the child. The Search takes an input from the user and returns an array of up to 5 city names. I pass that to the select where I map it into a selecttion form where the user can choose the right city and hit submit. I want the selected city to go back up to the cityObj state variable stored in search so I can send it off to other child components.
One of the main things i dont understand is ive set “setSelectedValue” and “setCityObj” to the same “userInput” but the cityObj still comes back as undefined.
Its almost there but my cityObj keeps coming back either undefined or as [object object] depending on what i try to set the cityObj to. I’m sure its something simple but I’m fairly new to react so any input is appreciated.
Search
function Search(props) {
const [searchTerm, setSearchTerm] = React.useState('');
const [cityArray, setCityArray] = React.useState([]);
const [cel, setCel] = React.useState(null);
const [cityObj, setCityObj] = React.useState('');
const Weather_API_key = '55c5392db030dbb75249aa1ff9b8a871';
const url = 'http://api.openweathermap.org/geo/1.0/direct';
const handleChange = (event) => {
setSearchTerm(event.target.value);
}
const handleSubmit = (event) => {
console.log('The form submitted with input: ' + searchTerm);
setCel(() => (searchTerm - 32) / 1.8);
event.preventDefault(); // Prevent default form submission behavior
console.log(searchTerm);
fetch(`${url}?q=${searchTerm}&limit=5&appid=${Weather_API_key}&units=metric`)
.then(response => response.json())
.then(data => {
console.log(data);
setCityArray(data);
console.log('API data came mounted');
});
}
return (
<div className="container p-3 bg-success">
<i className='text-danger fw-bold'>Search component</i>
<form onSubmit={handleSubmit} className='my-3 row g-3'>
<label className="col-sm-4 col-form-label">
Please enter city name:
</label>
<div className="col-sm-4">
<input type="text" value={searchTerm}
onChange={handleChange} className="form-control" />
</div>
<div className="col-sm-4">
<input type="submit" value="Search" className="btn btn-primary mb-3" />
</div>
</form>
<Select cityArray={cityArray} cityObj={cityObj} setCityObj={cityObj}/>
<Body />
</div>
);
}
Select
function Select(props, {cityObj, setCityObj}) {
const [userInput, setUserInput] = React.useState('');
const [selectedValue, setSelectedValue] = React.useState(null);
const handleChange = (event) => {
// Get the input from the user and save it in a state variable
// event.target is the input element
setUserInput(event.target.value);
console.log("event.target.value" + event.target.value);
}
const handleSubmit = (event) => {
console.log('The form submitted with input: ' + userInput);
setSelectedValue(() => userInput);
setCityObj(() => userInput)
event.preventDefault(); // Prevent default form submission behavior
}
return (
<div className="container p-3 bg-warning">
<i className='text-danger fw-bold'>Select component</i>
<form className=' row g-3'>
<label className="col-sm col-form-label">
Choose your country:</label>
<select value={userInput} onChange={handleChange}
className='form-select col-md'>
{props.cityArray.map((city, index) =>
<option key={city.name + index} value={`${city.name} , ${city.country}`}>
{city.name}, {city.country}</option>
)}
</select>
<div className="col-sm col-form-label">
<a onClick={() =>{
handleSubmit;
console.log("selected city is " + userInput);
console.log("the city object is " + cityObj);
}}>Submit</a>
</div>
</form>
{
selectedValue &&
<div> You selected {selectedValue} </div>
}
</div>
);
}