How to async await in react render function?

by

You should always separate concerns like fetching data from concerns like displaying it. Here there’s a parent component that fetches the data via AJAX and then conditionally renders a pure functional child component when the data comes in.

class ParentThatFetches extends React.Component {
  constructor () {
    this.state = {};
  }

  componentDidMount () {
    fetch('/some/async/data')
      .then(resp => resp.json())
      .then(data => this.setState({data}));
  }

  render () {
    {this.state.data && (
      <Child data={this.state.data} />
    )}
  }
}

const Child = ({data}) => (
  <tr>
    {data.map((x, i) => (<td key={i}>{x}</td>))}
  </tr>
);

I didn’t actually run it so their may be some minor errors, and if your data records have unique ids you should use those for the key attribute instead of the array index, but you get the jist.

UPDATE

Same thing but simpler and shorter using hooks:

const ParentThatFetches = () => {
  const [data, updateData] = useState();
  useEffect(() => {
    const getData = async () => {
      const resp = await fetch('some/url');
      const json = await resp.json()
      updateData(json);
    }
    getData();
  }, []);

  return data && <Child data={data} />
}

More Related Contents:

  1. async/await always returns promise
  2. How to turn this callback into a promise using async/await?
  3. What is the difference between JavaScript promises and async await?
  4. How to wait for a JavaScript Promise to resolve before resuming function?
  5. using async await and .then together
  6. How to implement a pseudo blocking async queue in JS/TS?
  7. What are asynchronous functions in JavaScript? What is “async” and “await” in JavaScript?
  8. Async function returning promise, instead of value
  9. Use async await with Array.map
  10. Why do we need middleware for async flow in Redux?
  11. Can I fire and forget a promise in nodejs (ES7)?
  12. Reactjs async rendering of components
  13. Await is a reserved word error inside async function
  14. What does $.when.apply($, someArray) do?
  15. Can’t throw error from within an async promise executor function
  16. for await of VS Promise.all
  17. Why can I not throw inside a Promise.catch handler?
  18. Using async/await inside a React functional component
  19. Are JavaScript Promise asynchronous?
  20. How to return from a Promise’s catch/then block?
  21. Wait promise inside for loop
  22. How does javascript async/await actually work?
  23. Why are javascript promises asynchronous when calling only synchronous functions?
  24. When does async function actually return a pending promise?
  25. Async Await map not awaiting async function to complete inside map function before mapping next item
  26. Await an iterative function without delimiter in JS
  27. ASYNC / AWAIT SyntaxError: await is only valid in async functions and the top level bodies of modules
  28. Implement async/await in sort function of arrays javascript
  29. Promise.all is returning an array of undefined and resolves before being done
  30. JS async/await – why does await need async?

Leave a Comment