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 ponent 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 ponent in App.js file: How can I reuse the same code/ponent 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 ponents 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 './ponents/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;

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 ponent 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 ponent in App.js file: How can I reuse the same code/ponent 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 ponents 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 './ponents/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;

• javascript
• html
• css
• reactjs

• Thanks you so much for the quick response, And yes by passing props it works. I have wrapped all the ponents Boxes in a wrapper div, so when I try to toggle it via toggle device toolbar ( devtool) all my boxes falls apart. How can i make my boxes reponsiv so it stuck to the wrapper div and not falling apart, Thanks gain! – Ayesha Commented Jun 6, 2019 at 13:59

3 Answers 3

You should pass a prop to your ponente to be reuse. As you notice you are using local ponent state in your ponent, like const {value} = this.state try the same approach but with props like const {value} = this.props and then passing that prop in the ponent 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

You can do something like this:

class Boxes extends Component {

    render() { 
        const { value } = this.props // value ing 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 ponent something like this:

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/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

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

App.js

import React, { Component } from 'react';
import './App.css';
import Boxes from './ponents/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;