Why is nothing from my React app displayed?

Asked

Viewed 37 times

0

I have an React app with the following code in App.js: 

import React, {Component} from 'react';

class App extends Component {
    constructor(){
        super();
        this.state = {
            firstNumber : 0,
            secondNumber : 0,
            result : 0
        }
        this.handleChange = this.handleChange.bind(this);
    }

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

    render() {
        return (
            <div>
                <label>
                    <input 
                        type="text" 
                        placeholder="Choose your first number"
                        name="firstNumber"
                        value={this.state.firstNumber}
                        onChange={this.handleChange}
                    />
                    <br/>
                    <input 
                        type="text" 
                        placeholder="Choose your second number"
                        name="secondNumber"
                        value={this.state.secondNumber}
                        onChange={this.handleChange}
                    />
                    <br/>
                    <h1>Result : {this.state.result}</h1>
                </label>
                <h1>{this.state.firstNumber}</h1>
                <h1>{this.state.secondNumber}</h1>
            </div>
        );
    }
}

export default 'App';

E no index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();

I wonder why nothing is displayed when I run mine yarn start.

react

  • Here export default 'App'; should be export default App;, you are trying to export a string and not the variable that is your component

  • how to be your package.json? look start what’s happening there

  • Your example code working https://stackblitz.com/edit/react-azsnge

1 answer

0


In the export default you put the created Component that in the case is the App as follows:

export default App;

and in addition if you want something dynamic at the time of typing the numbers already go calculating the result after the change in state must be created a function that is executed after the status update as follows:

this.setState({
    [name] : value
}, () => { // função que é executado após atualizar o valor do estado
  const firstNumber = parseInt( this.state.firstNumber);
  const secondNumber = parseInt(this.state.secondNumber);
  this.setState({
    result: firstNumber + secondNumber
  });
});

And just below the full example:

class App extends React.Component {
    constructor(){
        super();
        this.state = {
            firstNumber : 0,
            secondNumber : 0,
            result : 0
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(event){
        const {name,value} = event.target;
        this.setState({
            [name] : value
        }, () => {
          const firstNumber = parseInt( this.state.firstNumber);
          const secondNumber = parseInt(this.state.secondNumber);
          this.setState({
            result: firstNumber + secondNumber
          });
        });
    }

    render() {
        return (
            <div>
                <label>
                    <input 
                        type="text" 
                        placeholder="Choose your first number"
                        name="firstNumber"
                        value={this.state.firstNumber}
                        onChange={this.handleChange}
                    />
                    <br/>
                    <input 
                        type="text" 
                        placeholder="Choose your second number"
                        name="secondNumber"
                        value={this.state.secondNumber}
                        onChange={this.handleChange}
                    />
                    <br/>
                    <h1>Result : {this.state.result}</h1>
                </label>
                <h1>{this.state.firstNumber}</h1>
                <h1>{this.state.secondNumber}</h1>
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

It is worth remembering that the data typed will have to be numbers of the whole type any other different typing the code also needs to be refactored, but, the initial problem is because in export configured a text and not the component.

Browser other questions tagged react

You are not signed in. Login or sign up in order to post.