How to get label values dynamically and adding the numbers together from different input with reactjs

Question

Created a Div and inside it I have label element and input element, I want to get different label values in each div. How to re-use my div component instead of coding the same code again.

I have tried to search in Stackoverflow plus googles, Haven't received a better answer.

Here I have created div element with just label and input element and then I have rendured this component in App.js file: How can I reuse the same code/component to create 2 more div and having different labels values in it? Ho can I add numbers together from different input ( which I am getting from different components input) Appreciate all your help!

import React, { Component } from 'react';
import './calculator.css';

class Boxes extends Component {

    state = {
        inputOne: '',
        inputtwo: '',
        inputthree: ''
    }


    getInputValue = (e) => {
        const value = e.target.value;
        console.log('value: ', value);
        this.setState({
            inputOne: Number(e.target.value)
        });  

    }

    render() { 
        const { value } = this.props // destructuring
        const {inputOne, inputtwo, inputthree } = this.state

        return (
                <div className="boxes">
                    <label className="boxeslevel" htmlFor="text">
                       {value}
                    </label>
                    <input 
                    name="text" 
                    type="text" 
                    onChange={this.getInputValue}
                    />                    
                </div>

          );
    }
}

export default Boxes;

import React, { Component } from 'react';
import './App.css';
import Boxes from './components/calculator';


class App extends Component {
  render(){
    return (
      <div className="wrapper">
          <Boxes  value= {"Value 1:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 2:"} onChange={this.props.onChange}/>
          <Boxes  value= {"Value 3:"} onChange={this.props.onChange}/>
          <ShowResult />
      </div>
    );
  }
  }


export default App;

Answer 1

You can do something like this:

class Boxes extends Component {

    render() { 
        const { value } = this.props // value coming from props
        return (
            <div className="wrapper">
                <div className="firstBox">
                    <label htmlFor="text">
                       {value}
                    </label>
                    <input name="text" type="text" />                    
                </div>

            </div >

          );
    }
}

export default Boxes;

and in your app component something like this:

import React, { Component } from 'react';
import './App.css';
import Boxes from './components/calculator';


class App extends Component {
  render(){
    return (
      <div className="App">
        <Boxes value={1}/> 
        <Boxes value={2}/>
        <Boxes value={3}/>
      </div>
    );
  }
  }


export default App;

Here is live demo link

Answer 2

You should pass a prop to your componente to be reuse. As you notice you are using local component state in your component, like const {value} = this.state try the same approach but with props like const {value} = this.props and then passing that prop in the component usage like

<Boxes value={“label 1”}/>
<Boxes value={“label 2”}/>

That would work. Hope it help you

Remember you can use as many props you need and access them as the same way mention above

Answer 3

You have to use props instead of state in your Boxes component. Then you can pass the required props from the App component.

App.js

import React, { Component } from 'react';
import './App.css';
import Boxes from './components/calculator';


class App extends Component {
  render(){
    return (
      <div className="App">
        <Boxes value={"Value 1"}/>
        <Boxes value={"Value 2"}/>
        <Boxes value={"Value 3"}/>
      </div>
    );
  }
  }


export default App;

Boxes.js

import React, { Component } from 'react';
import './calculator.css';

class Boxes extends Component {
    render() { 
        const { value } = this.props // destructuring
        return (
            <div className="wrapper">
                <div className="firstBox">
                    <label htmlFor="text">
                       {value}
                    </label>
                    <input name="text" type="text" />                    
                </div>

            </div >

          );
    }
}

export default Boxes;