Hi guys, here another issue with the meme Generator

[franciscomonellole]

This my memeHero.jsx, when i try to write the code to add random pics of memes the screen dissapier

import './MemeHero.css'
import memesData from './memesData'

function MemeHero(){
const [memeImage, setMemeImage] = React.useState("")    
 
function getMemeImage() {
    const memesArray = memesData.data.memes
    const randomNumber = Math.floor(Math.random() * memesArray.length)
    setMemeImage(memesArray[randomNumber].url)
}

    return(
        <main>
        <div className='form'>
         <input type="text" placeholder='Top text' className='form--Input'/>
         <input type="text" placeholder='Bottom text' className='form--Input'/>
         <button className='form--Button' onClick={getMemeImage} >Get a new Meme</button>
         
        </div>
        <img src={memeImage} />
        </main>
    )
}

export default MemeHero

[kevinSmith]

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[kevinSmith]

What do you mean, “the screen disappears”.

I would want you to add in before the return statement:

console.log('memesArray', memesArray)
console.log('memesImage', memesImage)

I’d also want to see what errors you might be getting in the console.

[franciscomonellole]

I found that i need define React in MemeHero. thank you

[kevinSmith]

Yes, you should have import React from 'react' in any file that has JSX. Most people have a linter set up that would catch that.

[lasjorg]

Just an FYI, that isn’t true anymore. Not since React 17

Introducing the New JSX Transform – React Blog

• With the new transform, you can use JSX without importing React.

---

@franciscomonellole If you do this React.useState you obviously do have to have React imported. But most people just import the hook they need directly.

import { useState } from 'react';

// Example use
const [count, setCount] = useState(0);

[kevinSmith]

Hmm, news to me. That doesn’t seem to be the case with React Native, using React 17 - it still makes me import. Hmmm. At least the linter screams if I leave it off.

[kevinSmith]

Yeah, it crashes, too. But I guess it’s no longer needed for plain React. Cool, good to know.