How to pass props from async functions triggered by an OnClick event to a component React js

✔ Recommended Answer

Your component has to return everything you want to render. You can't return another component from an onclick function - where would it be returned to?

Store the data in a state.

Use that data in your render logic.

const ExampleComponent = () => {    const [data, setData] = useState(null);    const show = async () => {        const sectionSearched =;        const result = await getNewsFilteredBySection(sectionSearched);        setData(result)    };    if (data === null) {        return <button onClick={show}>Click me</button>    } else {        return <News newsAttributes={data} />    }}


Answered By: Quentin


Most Popular

PhpStorm, return value is expected to be 'A', 'object' returned

Remove Unicode Zero Width Space PHP

Laravel file upload returns forbidden 403, file permission is 700 not 755