Convert this JS snippet to React

Question

I'm new to React, just to get the idea, how would you convert this snippet to React?

<div id="input" contenteditable></div>
        <button id="submit">Convert to kg!</button>
        <br>
        <div id="output"></div>


       <script>

        const button = document.querySelector('#submit');
        const input = document.querySelector('#input');


        function convert() {
            let x=input.textContent;

       if (isNaN(x)) 
           {
           alert("Must input numbers");
           return false;



           }  else {
                const pounds = document.querySelector('#input').textContent;

                let kg = pounds*0.45;
                document.querySelector('#output').innerHTML = pounds + " pounds is " + kg + " kg";
           }
            }



        button.addEventListener('click', convert);

        </script>

I transformed html to jsx

<div
    id="input"
    contentEditable
    style={{ width: "40%", border: "solid 1px black", margin: "20px}" }}
  />
  <button id="submit">Convert to kg!</button>
  <br />
  <div id="output" style={{ marginTop: 20 }} />
</div>

But, how to go about Javascript, no idea... Can someone give a direction maybe?

Drew Reese · Accepted Answer · 2020-05-03 20:45:36Z

1

Basic functional component:

weightLb state variable to hold user input
weightKg state variable to hold converted weight

component & logic:

function App() {
  const [weightLb, setWeightLb] = useState(0);
  const [weightKg, setWeightKg] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    setWeightKg(weightLb * 0.45);
  }

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <button type="button" onClick={convert}>Convert to kg!</button>
      <div>Weight (kg): {weightKg}</div>
    </div>
  );
}

Note: I didn't apply any styling other than default in sandbox.

A simpler abstraction may be to forego the button to convert and just convert input onChange on the fly; requires single piece of state.

function App() {
  const [weightLb, setWeightLb] = useState(0);

  const convert = () => {
    if (Number.isNaN(weightLb)) {
      alert("Must input numbers");
    }
    return weightLb * 0.45;
  };

  return (
    <div className="App">
      <label>
        Pounds
        <input type="number" onChange={e => setWeightLb(e.target.value)} />
      </label>
      <div>Weight (kg): {convert()}</div>
    </div>
  );
}

edited May 3, 2020 at 20:45

answered May 3, 2020 at 20:38

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

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

2 Comments

Andrii Gorokhovskyi Over a year ago

Thanks! This works ok on standard create react app. But, when trying with server-side rendering kit from here github.com/simpletut/React-Starter-Kit - doesn't work...

(node:3377) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Drew Reese Over a year ago

@AndriiGorh Sorry, SSR wasn't part of the question. Please update your question to reflect your use-case more accurately. I'm not very familiar with SSR though, but these resources my help: reactjs.org/docs/react-dom-server.html and reactjs.org/docs/react-dom.html#hydrate

Gopinath · Accepted Answer · 2020-05-03 21:26:54Z

Here are the 6 steps for implementing the React component as per the above requirement:

Define a React Component called App, which extends React Component.
Initialize the 'state' of the component in the constructor method of the component.
The state will contain the variables (weightLb, weightKg)
Define a method (setWeightLb) to change the value of weightLb
Define a method (convert) to calculate weightKg using the formula of

kg = lb x 0.453592
Define 'render' method to show static html of thecomponent
Inside the render method, make calls to setWeightLb and convert on corresponding events.

Here is the working example:

import React, { Component } from "react"

export default class App extends Component {

  constructor(props) {
    super(props)
    this.state = {weightLb: 0.0, weightKg: 0.0}
  }    

  setWeightLb = (value) => {
    this.setState({weightLb: value})
  }

  convert = () => {
    this.setState({weightKg: (this.state.weightLb * 0.453592)})
  }

  render() {
    return (
      <div>
        <label>
          Pounds
          <input type="number" onChange={e => this.setWeightLb(e.target.value)} />
        </label>
        <button type="button" onClick={this.convert}>
          Convert to kg!
        </button>
        <div>Weight (kg): {this.state.weightKg}</div>
      </div>
    )
  }
}

user8737957 · Accepted Answer · 2020-05-03 20:36:41Z

Something like this. It may not work as you wished but from this example you can easly create your own answer i guess.


import React from "react";

const convert = (text) => {
  if (parseInt(text, 10) > 0) {
    const kg = parseInt(text, 10) * 0.45;
    document.querySelector("#output").innerHTML =
      text + " pounds is " + kg + " kg";
  }
  alert("You must enter digits");
};

const ExampleComponent = () => {
  const [text, setText] = React.useState("");

  return (
    <section>
      <div id="input" onChange={(e) => setText(e.target)}></div>
      <button id="submit" onClick={() => convert(text)}>
        Convert to kg!
      </button>
      <br />
      <div id="output"> </div>
    </section>
  );
};

Collectives™ on Stack Overflow

Convert this JS snippet to React

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related