DRY using props in React

When we are learning about React and we just begin to understand its structure we can face the need to avoid the repetition of logic in the application we are creating, for that reason today we are going to know about the use of props to reuse code and implement DRY ( Don’t Repeat Yourself) in our React project.

First of all, what are the props?


The props are the way in which React can send information between its components, the props are passed from superior components called parent components to inferior components also called child components.

Some features of the props are that they are immutable, which means that the child component should not change the value of the prop since they are used as read values, using props we can pass any type of data such as strings, numbers, booleans, arrays, objects or functions.

Ok, after what we have read, it’s time to put it into practice what the theory says.

In the next example we can see the use of props to send a string  from one component to another.


class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent name={"Child component"}/>
       )
   }
}

export default ParentComponent;




We can see that to send the data we call the child component and we pass the argument "name", and to access it from our child component we only should do the following.


class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.name}</p>
     </div> 
    )
  }
}

export default ChildComponent;




We only get this.props and the name of the variable we sent.


In the same way if we want to send a numerical value we do the following.


class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent number={1}/>
       )
   }
}

export default ParentComponent;


And to get it.


 class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.number}</p>
     </div>
   )
  }
}

export default ChildComponent;


If we want to send another type of data such as an array.


class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent array={["value 1", "value 2"]}/>
       )
   }
}

export default ParentComponent;




We get the array in the same way as the other types of data.




class ChildComponent extends Component {
 render() {
   return (
     <div>
       <p>{this.props.array}</p>
     </div>
   )
  }
}

export default ChildComponent;




If we want to go through it, we can do it in the following way, the result is that it will show each value within the array.




class ChildComponent extends Component {
 render() {
   return (
     <div>
       {this.props.array.map((data) => (
           <p>{data}</p>
       ))}
     </div>
   )
  }
}

export default ChildComponent;




In the next example we are going to send an object.




class ParentComponent extends Component {
   render() {
       return (
           <ChildComponent object={{name: 'My object'}}/>
       )
   }
}

export default ParentComponent;




In order to show the information we access the object that we sent and then to the property,  you can choose the names of the props as you like.




class ChildComponent extends Component {
 render() {
   return (
     <div>
           <p>{this.props.object.name}</p>
     </div>
   )
  }
}

export default ChildComponent;




Now something that we may be very interested in, is in sending a function, in order to not repeat  code and make DRY.




 class ParentComponent extends Component {
   constructor(){
       super()
       this.sum = this.sum.bind(this)
   }

   sum(a,b) {
       console.log(a + b)
   }

   render() {
       return (
           <ChildComponent function_sum={this.sum}/>
       )
   }
}

export default ParentComponent;




In the example we can see how to send a function to our child component, for example, the function is sent with the name of function_sum but we can use the name we want, we must declare the function in the constructor of our parent component otherwise we could obtain errors when we try to access it.

In our child component we access to the function in the next way:


class ChildComponent extends Component {
 render() {
   return (
     <div>
           <p>Press the button to sum a + b</p>
           <button onClick={() => this.props.function_sum(1,2)}>Sum</button>
     </div>
   )
 }
}

export default ChildComponent;



By pressing the "sum" button we can see in the console the sum of 1 + 2, executing the function found in our parent component.

Using all these methods that we saw, we can reuse code of our application, for example passing functions and not create them in one component and repeat it in others, to achieve DRY in react using props.


About 4Geeks: 4Geeks is a global product development and growth marketing company, and all-in-between, focused on 10X ROI for startups, small and mid-size companies around the world. 4Geeks serves industries like E-Commerce & Retail, Startups, HealthTech, Marketing, Banking & FinTech and Real Estate. Headquartered in United States, and nearshore development centers in Mexico and Costa Rica. Pura Vida!

Plan to build an extended engineering team in Latin America? Start right here.

Comments

Popular posts from this blog

What Does Resume Say About You?

Importance of Software Quality in 2019

Analyze Video using AWS Services and OpenCV