How to render a new element in react?-CodePudding

Hi i'm working on a weather report project that pulls data from an Weather forecast API. I've already got the project to search for the city that the user inputted in a search bar, and I've pulled the relevant data from the JSON the API returns via console.log, but I'm having trouble displaying that data on the page for the user to see. I want to create a new "Div" called "weather-report-card" that holds a bunch of new elements within it like an "h1" tag that holds the city name, and a "p" tag holds the temperature for the city, and display all of that data in a empty div in the jsx called weather-container. when the user clicks the search button.

here is my code.

the JS.

function WeatherApp(){

    const [searchBar, setSearchBar] = useState('');

    function getSearchBarValue(e){
        setSearchBar(e.target.value.trim());
    }

    async function getWeatherFromAPI(e){
        e.preventDefault();
        const apiKey = '';
        try{
            const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${searchBar}&&units=imperial&appid=${apiKey}`, {mode: 'cors'})
            const weatherData = await response.json();
            console.log(weatherData);
            const temp = weatherData.main.temp;
            const maxTemp = weatherData.main.temp_max;
            const minTemp = weatherData.main.temp_min;
            const feelsLikeTemp = weatherData.main.feels_like;
            const humidity = weatherData.main.humidity;
            const cityName = weatherData.name;
            const country = weatherData.sys.country;
            const weatherDescription = weatherData.weather[0].description;
            const weather = weatherData.weather[0].main;
            const icon = `<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/${weatherData.weather[0]["icon"]}.svg">`;
            const weatherReportContentCard = document.createElement("div"); 
            weatherReportContentCard.classList.add("weatherReportContentCard");

            weatherReportContentCard.innerHTML = 
                `
                <div >
                    <h2 >${cityName}</h2>
                    <h2 >${country}</h2>
                    <p >${icon}</p>
                    <p >${Math.round(temp)}F</p>
                    <p >Feels like ${Math.round(feelsLikeTemp)}F</p>
                    <h2 >${weather}</h2>
                    <h2 >${weatherDescription}</h2>
                </div>`
                
            //weatherContainer.appendChild(weatherReportContentCard);
            
        }catch(err){
            err=alert("Im sorry we couldn't get you weather data")
        }
    }

Here is my html/JSX

    return(
        <>
            <div className="search-container">
                <form>
                    <input type="search" placeholder="Enter City Here" className="search-bar"  onChange={getSearchBarValue}/>
                    <button type="submit" className="search-btn"><FcSearch onClick={getWeatherFromAPI}/></button>
                </form>
            </div>
            <div className="weather-container">

            </div>
        </>
    )
}

export default WeatherApp;

I want to place the weather report data into the "weather-container" div how would I do that in react?

CodePudding user response：

You should create another component for weather report and render it conditionally, pass the values from API as props and embed it in the jsx

CodePudding user response：

You can create a function to fetch the data from the API using Axios or Fetch and pass that function to the button's onClick prop. After that, you can get the data and set the value to a state. Make use of conditional rendering to load the data on screen only when available.

const [data, setData] = useState();

const handleFetchData = async () => {
 const response = await fetch(...);
 setData(response);
}

** html

return (
<div>
{data && 
<div>
<span>{data.name}</span>
</div>
}
</div>
)