Thiết kế website giá rẻ

Question

Bit stuck on this. I have a Main parent component that goes to a Search component which then goes to a Select component. The search asks for a city and then goes to an API and brings back 5 search results and i send them to the select component where I map the results into a selection form. Once the user selects the city and submits it i need the selection to be stored somewhere in the main so i can use it on other children. Any help is appreciated, still getting a handle on React.

Ive tried just making the Select component a direct child of main but it didnt like that.
Ive tried sending the “cityObj” down through the search into the select but no luck, unless i just did something wrong.
I though maybe making the “Body” component that needs the info a child of the “Select” but im still working on that.

Main.js

function Main() {
    const [cityObj, setCityObj] = React.useState('');
    return (
        <div className="container p-5 bg-primary">
            <i className='text-danger fw-bold'>Main component</i>
            <h2 className='m-3'>My React Weather Application</h2>
            <Search />
            <hr />
            <Body />
        </div>
    );
}

Search.js

function Search(props) {
    const [searchTerm, setSearchTerm] = React.useState('');
    const [cityArray, setCityArray] = React.useState([]);
    const [cel, setCel] = React.useState(null);
    const [selectedCity, setSelectedCity] = React.useState(null);
    

    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} />
        </div>
    );
}

Select.js

function Select(props) {
    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);
    }

    const handleSubmit = (event) => {
        console.log('The form submitted with input: ' + userInput);
        setSelectedValue(() => 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 onSubmit={handleSubmit} 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">
                    <input type="submit" value="Submit" className="btn btn-primary mb-3" />
                </div>
            </form>

            {
                selectedValue &&
                <div> You selected {selectedValue} </div>
            }
        </div>
    );
}

Thiết kế website giá rẻ

Danh mục

Lifting state through multiple child elements