I am using useEffect to get data from an api.

```
  useEffect(() => {
      async function fetchData() {
          try {
              const response = await fetch(
                  `/api/posts/getCats`
              );
              const cats = await response.json();
              console.log(cats);
          } catch (e) {
              console.error(e);
          }
      };
      fetchData();
  }, []);

```

The problem is when I try to use it in the return, its value is undefined.

```
 {cats.map((data) => {

```

`cats` has value when I console.log it.

I cannot use componentDidMount because all my code is functional components.

**Edit:** I updated the code as per answers below but still get
`TypeError: cats.map is not a function`
All answers below actually make sense but I am not sure why its not working.

```
export default function Posts() {
  const [cats, setCats] = useState();
  useEffect(() => {
    fetch(`/api/posts/getCats`)
      .then(res => res.json())
      .then(setCats)
      .catch(console.error);
  }, []);

  return (
      <div>
        {cats?.map((data) => {
            <h4>{data.main}</h4>
        })}
        </div>
      )      
    }

```