How to use fetch result in return statement in React?

Question

i have a fetch that shows the below results. Now i want to show the fetch in the return statement(in the div results). Has anyone an idea how to do that. I tried it with a map function because i though the fetch is an array, but i failed.

 (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 0: {label: "Hello world", href: "#hello-world"} 1: {label: "John Doe", href: "#john-doe"} 2: {label: "Jane Doe", href: "#jane-doe"} 3: {label: "Foo", href: "#foo"} 4: {label: "Bar", href: "#bar"} 5: {label: "Baz", href: "#baz"} 6: {label: "Henry Ford", href: "#henry-ford"} 7: {label: "Gordon Ramsay", href: "#gordon-ramsay"} 8: {label: "Angela Merkel", href: "#angele-merkel"} length: 9__proto__: Array(0)

 export function AutoSuggestForm({ onChange, value }) { React.useEffect(() => { const myFetch = fetch('http://localhost:8000/api/auto-suggest?input=input') myFetch.then(response => response.json()).then(console.log) }) return ( <div className={styles.component}> <input onChange={handleChange} {...{ value }} className={styles.input} type='search' placeholder='search' /> <div className={styles.results} /> </div> ) function handleChange(e) { onChange(e.target.value) } }

Answer 1

https://reactjs.org/docs/hooks-state.html

export function AutoSuggestForm({ onChange, value }) {
    const [data, setData] = React.useState([]);

    React.useEffect(() => {
        const myFetch = fetch('http://localhost:8000/api/auto-suggest?input=input');
        myFetch.then(response => response.json()).then(setData);
    });

    return (
        <div className={styles.component}>
            <input onChange={handleChange} {...{ value }} className={styles.input} type="search" placeholder="search" />
            <div className={styles.results}>
                {data.map(d => (
                    <div key={d.label}>{d.label}</div>
                ))}
            </div>
        </div>
    );
    function handleChange(e) {
        onChange(e.target.value);
    }
}

Answer 2

create state through React.useState, change it when you get result. This is basis of react

export function AutoSuggestForm({ onChange, value }) {
  const [results, changeResults] = React.useState([])
  React.useEffect(() => {
    const myFetch = fetch('http://localhost:8000/api/auto-suggest?input=input')
    myFetch.then(response => response.json()).then(res => changeResults(res))
  })
  return (
    <div className={styles.component}>
      <input onChange={handleChange} {...{ value }} className={styles.input} type='search' placeholder='search' />
      <div className={styles.results} >
        {results.map((result, i) => <span key={i}>{result}</span>}
      </div>
    </div>
  )
  function handleChange(e) {
    onChange(e.target.value)
  }
}