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)
  }
}

Have you considered using Redux? redux.js.org/introduction/motivation — Pablo CG
– Pablo CG, Commented Jun 4, 2020 at 11:18

Nikita Madeev · Accepted Answer · 2020-06-04 11:18:00Z

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

answered Jun 4, 2020 at 11:18

Nikita Madeev

4,49012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Melissa Over a year ago

Do you also have an idea how to connect the fetch to the <input>. So that the value of the input is the url parameter of the fetch? I am creating an auto suggest search bar.

Nikita Madeev Over a year ago

@Melissa If you need fetch data on every input, you can just transfer your fetch logic (code inside useEffect and you can delete useEffect) in handleChange (use e.target.value like url parameter)

Dmitry Reutov · Accepted Answer · 2020-06-04 11:19:56Z

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)
  }
}

Collectives™ on Stack Overflow

How to use fetch result in return statement in React?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related