Write a function in React js

Question

Hi I am new to React and js.

I am trying to write two text boxes such that the user will insert two numbers and when clicking Add button, he will get the result.

My suggestion was:

import React, { Component } from 'react';

export class Home extends Component {
displayName = Home.name

  render() {
    return (
        <div>
        <h1>Hello world! This is a new Web App</h1>

            <input type="text" name="" id="txt1" />
            +
            <input type="text" name="" id="txt1" />
            = <br/>
            <button onClick="add()">Add</button>

        </div>
      );
     }
    }

And I thought and a function add() that will do the following:

function add()
{
 var a = getElementById("txt1").value;
 var b = getElementById("txt2").value;
 alert(pardeInt(a)+parseInt(b));
}

If someone could edit my suggested code so it will work, that would be great.

Thanks in advance.

This looks like you haven't read the first thing about how to use event handlers and form controls in react. Try reactjs.org/docs/handling-events.html and reactjs.org/docs/forms.html — Quentin
– Quentin, Commented Oct 24, 2018 at 12:17
You are just using react to render HTML and use javascript. This has nothing to do with actual react. Start by reading more about react components please. Maybe follow some tutorials? — Dimitri Bosteels
– Dimitri Bosteels, Commented Oct 24, 2018 at 12:35

Mosè Raguzzini · Accepted Answer · 2018-10-24 12:21:47Z

1

First you need to bind the function to your context. This could be achieved by

this.myFunction.bind()

or through arrow function (that bind function for you)

then you have to update the state (the render will be executed again when state change):

import React, { Component } from 'react';

export class Home extends Component {
  state = { 
    result: 0,
    val1: 0,
    val2: 0,
  }

  handleChangeOne = (event) => {
    this.setState({val1: event.target.value});
  }
  
  handleChangeTwo = (event) => {
    this.setState({val2: event.target.value});
  }

  add = () =>
  {
   this.setState({
      result: parseInt(this.state.val1)+parseInt(this.state.val2)
      });
  }

  render() {
    return (
        <div>
        <h1>Hello world! This is the result: {this.state.result}</h1>

            <input onChange={this.handleChangeOne} type="text" />
            +
            <input type="text" onChange={this.handleChangeTwo} />
            = <br/>
            <button onClick={this.add}>Add</button>

        </div>
      );
     }
    }

Avoid to access directly to the DOM and rely to local state, instead.

answered Oct 24, 2018 at 12:21

Mosè Raguzzini

15.9k1 gold badge34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jrz Over a year ago

Thank you. Maybe you can assist me also here? stackoverflow.com/questions/52984757/…

Rudy · Accepted Answer · 2018-10-24 12:21:49Z

0

Your code is just telling that you don't have React.js and React Native proper knowledge.

Definitely you should first take a look into React.js basis and THEN if you want to build mobile apps, the React-Native documentation:

React.js documentation: https://reactjs.org/docs/getting-started.html
React Native documentation: https://facebook.github.io/react-native/docs/getting-started.html

answered Oct 24, 2018 at 12:21

Rudy

1589 bronze badges

Collectives™ on Stack Overflow

Write a function in React js

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related