CODEWITHSUNDEEP
javascriptreactjs
present_perfect
present_perfect

Reputation: 179

Why I cannot see my application on screen? React.js

I've been working on a small app just for practice. I don't know why it does not render on a screen, there is nothing shown. I think I'm missing something really small, but don't know what that might be. I also would like to mention that the exercise was part of a tutorial and I have been following the steps religiously. Please advise.

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render (<App/>, document.getElementById ("root"));

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

This is the App component:

import React from "react"
import MemeGenerator from "./MemeGenerator"
import Header from "./Header"

function App (){
  return(
    <div>
      <Header />
      <MemeGenerator />
    </div>
  )
}

export default App

and the main component:

import React from "react"

class MemeGenerator extends React.Component() {
    constructor() {
        super()
        this.state = {
            topText: "",
            bottomText: "",
            randomImg: "http://i.imgflip.com/lbij.jpg",
            allmemeImgs: []
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }
    componentDidMount() {
        fetch("https://api.imgflip.com/get_memes")
            .then(response => response.json())
            .then(response => {
                const { memes } = response.data
                this.setState({ allMemeImgs: memes })
            })
    }

    handleChange(event) {
        const { name, value } = event.target
        this.setState({ [name]: value })
    }

    handleSubmit(event) {
        event.preventDefault()
        const randNum = Math.floor(Math.random() * this.state.allmemeImgs.length)
        const randMemeImg = this.state.allmemeImgs[randNum].url
        this.setState({ randomImg: randMemeImg })
    }
    render() {
        return (
            <div>
                <form className="meme=form" onSubmit={this.handleSubmit}>
                    <input type="text" name="topText" value={this.state.topText} placeholder="Top Text" onChange={this.handleChange} />
                    <input type="text" name="bottomText" value={this.state.bottomText} placeholder="Bottom Text" onChange={this.handleChange} />
                    <button>Gen</button>
                </form>
                <div className="meme">
                    <img src={this.state.randomImg} alt="" />
                    <h2 className="top">{this.state.topText}</h2>
                    <h2 className="bottom">{this.state.bottomText}</h2>
                </div>
            </div>
        )
    }
}
export default MemeGenerator

Upvotes: 0

Views: 159

Answers (1)

ayxos
ayxos

Reputation: 408

Remove "()" at the end of

class MemeGenerator extends React.Component()

Reason: Super expression must either be null or a function

I recommend you to install a linter

https://codesandbox.io/s/relaxed-hugle-kse93?file=/src/Meme.js

Upvotes: 1

Related Questions