Confused on how to actually get access to and display data from a fetch request in React

JavaScript
1

I know this is not a React issue, but my problem is not being able to use innerHTML right within the fetch request to display the data coming back. I have not messed around with API’s a ton.

I can’t store “data” as a variable and use it outside of the fetch request so all I can really do is console log the data. I’m not sure how to get access to this data outside of the useEffect function.

I’m just trying to display an array of data coming back on the page.

import React from 'react'
import './App.css';
import { useEffect, useState } from 'react';
import EmojiList from './components/EmojiList';

function App() {

  useEffect(() => {
    fetch('https://emoji-api.com/emojis?access_key=5ae2f4f6740c6dc6d6f246f19228e53d32b133e3')
      .then((response) => response.json())
      .then((data) => data.forEach(element => {
        console.log(element)
      })
      )
  }, [])

  return (
    <div>
      <h1>😃Emoji Search!😃</h1>
      <input type="text" />
      <EmojiList />
    </div>
  );
}

export default App;
2

Within App function, use useState to create a state variable that you can then update within the fetch call. You have a component named EmojiList. What does it do?

3

thank you! This is what I was looking for. I think I’m slowly getting the hang of React.

and I’m probably going to put some of the code into EmojiList. I’m still learning how to organize my React code. I’m still a bit confused on what should be in its own component and what should be in the App component / Main component.

import React from 'react'
import './App.css';
import { useEffect, useState } from 'react';
import EmojiList from './components/EmojiList';

function App() {

  const [emojiArray, setEmojiArray] = useState([])

  useEffect(() => {
    fetch('https://emoji-api.com/emojis?access_key=5ae2f4f6740c6dc6d6f246f19228e53d32b133e3')
      .then((response) => response.json())
      .then((data) => setEmojiArray(data));
  }, [])

  return (
    <div>
      <h1>😃Emoji Search!😃</h1>
      <input type="text" />
      <ul>
        {emojiArray.map((item) => {
          return <li>{item.character}</li>
        })}
      </ul>
      <EmojiList />
    </div>
  );
}

export default App;
4

so, I’m still just messing around with this project, and I did get it to do what I wanted however I’m having a bug. if I type something in the search bar that is NOT in the api database it crashes the app.

so, if I typed in “foewjnewkfn” for example the app crashes because undefined or null gets returned.

import React from 'react'
import './App.css';
import { useEffect, useState } from 'react';



function App() {
  const [inputText, setInputText] = useState('')
  const [emojiArray, setEmojiArray] = useState([])

  useEffect(() => {
    fetch(`https://emoji-api.com/emojis?search=${inputText}&access_key=5ae2f4f6740c6dc6d6f246f19228e53d32b133e3`)
      .then((response) => response.json())
      .then((data) => setEmojiArray(data));
  }, [emojiArray])

  function filter(event) {
    setInputText(event.target.value)
  }

  return (
    <div className='container'>
      <h1>😃Emoji Search!😃</h1>
      <input
        className='search-field'
        type="search"
        value={inputText}
        onChange={filter}
      />
      <ul>
        {emojiArray.slice(0, 15).map((item) => {
          return <li className='emoji-item' key={Math.random() * 10000}>{item.character}</li>
        })}
      </ul>
    </div>
  );
}

export default App;
6

I took it out completely and I’m just working within the App component.

8

All I was attempting to do is be able to search for something in the input field and have the correct emojis display during the search automatically. It does work if something correct is typed into the input field such as “smile” or “tree” but if something random like “fjenwfkjnwf” is typed in it completely crashes the app.

I’m guessing this line of code is causing the problem because if I’m searching for something not in the database it crashes everything.

fetch(`https://emoji-api.com/emojis?search=${inputText}&access_key=5ae2f4f6740c6dc6d6f246f19228e53d32b133e3`)
9

In actuall when you type any anything that didn’t match then they return null instead of any array so you must have to check if your data is a array or null, you can check it by replacing your code by this

 .then((response)=>  response.json())
.then((data) => data ? setEmojiArray(data) : setEmojiArray([]))

it will check if data is null and if it is not null than will put data in EmojiArray else it will put empty array into EmojiArray

Hope this has solve your problem

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.