How can I display the result, now in the code below I only export it to the console but I want it in the browser in a paragraph or other tag. I know this is a stupid question (maybe) but I'm new to React.

import React, { Component, useState, useEffect } from 'react';

class App extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      input: 0
    }
  }
 
  handleChange(e){
    this.setState({input: e.target.value})
  }

  handleSubmit(e){
    e.preventDefault()
    let value = eval(this.state.input)
    console.log(value)
   
    
  }

  render(){
    return(
        <div>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input type="text " onChange={(e) => this.handleChange(e)}/>
          <button>Send</button>
        </form>
        </div>
      )
  }
}

export default App;

How can I display the result, now in the code below I only export it to the console but I want it in the browser in a paragraph or other tag. I know this is a stupid question (maybe) but I'm new to React.

import React, { Component, useState, useEffect } from 'react';

class App extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      input: 0
    }
  }
 
  handleChange(e){
    this.setState({input: e.target.value})
  }

  handleSubmit(e){
    e.preventDefault()
    let value = eval(this.state.input)
    console.log(value)
   
    
  }

  render(){
    return(
        <div>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input type="text " onChange={(e) => this.handleChange(e)}/>
          <button>Send</button>
        </form>
        </div>
      )
  }
}

export default App;

• javascript
• reactjs

• Do you want to show input value in paragraph on change of input right ? – GMKHussain Commented Jul 5, 2020 at 14:04
• @GMKHussain i want to show the result of the value in a paragraph, now only is showed in the console. – Tudor Alexandru Commented Jul 5, 2020 at 14:05

4 Answers 4

Set value as a state. Then access it using this.state.value

import React, { Component, useState, useEffect } from 'react';

class App extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      input: 0,
      value: "",
    }
  }
 
  handleChange(e){
    this.setState({input: e.target.value})
  }

  handleSubmit(e){
    e.preventDefault()
    let value = eval(this.state.input)
    this.setState({value});
   
    
  }

  render(){
    return(
        <div>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input type="text " onChange={(e) => this.handleChange(e)}/>
          <button>Send</button>
        </form>
        <p>{this.state.value}</p>
        </div>
      )
  }
}

export default App;

I can see you are using the useState hook. how about you set a state which will be updated when you submit your form?

like const [value, setValue] = useState() in your function, and then in your submit function call the setValue(value)

from there you can access the value state and render it anywhere in your ponent. Kindly note that you should only use hooks inside a functional ponent.

Hi here is a working Demo on how you can do what you have in mind:

class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      input: 0
    }
  }

  handleChange(e) {
    this.setState({
      input: e.target.value
    })
  }

  handleSubmit(e) {
    e.preventDefault()
    let value = eval(this.state.input)
    console.log(value)


  }

  render() {
    return(
        <div>
          <form onSubmit={(e) => this.handleSubmit(e)}>
            <input type="text " onChange={(e) => this.handleChange(e)}/>
            <button>Send</button>
          </form>
          <p>
            {this.state.input}
          </p>
        </div>
      )
  }
}





const rootElement = document.getElementById("root");
ReactDOM.render( 
  <React.StrictMode >
    <App / >
  </React.StrictMode>,
  rootElement
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare./ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>

Check you can achieve this with some changes.

import React, { Component, useState, useEffect } from 'react';

class App extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      input: 0,
      value: '', //<-- Added
    }
  }
 

  handleChange(e){
    this.setState({input: e.target.value})
  }


  handleSubmit(e){
    e.preventDefault()
    let value = eval(this.state.input)
    console.log(value)
    this.setState({value}); //<--Added 
  }

  render(){
    return(
        <div>
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input type="text " onChange={(e) => this.handleChange(e)}/>
          <button>Send</button>
        </form>
        <p>{this.state.value}</p> <!-- Added -->
        </div>
      )
  }
}