How To Set Default Props In React

React: Everything about Default Props

In this mail service, we'll learn all about default props in React. It will aid united states of america not only become better developers but to provide a better experience for our users. Allow'south become started, and feel costless to skip the intro if y'all feel like information technology!

Brusk Intro

Reactjs, a JSX-based JavaScript UI library is the most popular JS library in the universe right now. Thousands of apps are built using React, information technology offers a plethora of goodies:

• High performance
• Smaller builds
• Virtual DOM
• Code reuse
• UI based on Components
• Runs on dissimilar platforms: Mobile/Tablet and Desktop
• Easy starting time for beginners

Its primary built to use the concept of Components for each view or group of views. A React component is like to an HTML element. And a component is basically a grade containing:

• props
• data
• country (manipulated via setState())
• markup (delivered by render())

All these combined together create a UI widget.

And so- that was fun, correct? only you kinds knew all of that.

Well, components are the principal tools we employ to build an interactive UI with. All React applications accept a root component, oftentimes chosen the App component.

React provides ways for components to laissez passer data to each other and to respond to each other's events.

Yous can write a component and utilise it as a child component in several other components — they were designed to exist cocky-independent and loosely coupled for this purpose.

Each component contains valuable data about itself:

• What information information technology needs as input
• How to draw itself

Encapsulates reusable components with Flake to run them anywhere beyond your applications.

Bit encapsulates components in your projects with all their files and dependencies, so they can run anywhere beyond your applications.

Build faster past making your components reusable out-of-the-box, and collaborate as a team to share and find components. No refactoring or configurations needed, just share components and build truly modular apps.

GET STARTED

Statement

As nosotros described, React components accept inputs in the props argument.

          // ES6 course
grade CatComponent extends React.Component {
            constructor(props) {}
            render() {
            return <div>{this.props.catName} Cat</div>
            }
}          // Functional component
office CatComponent(props) {
            return <div>{props.catName} Cat</div>
}        

This is passed down from the Parent component.

          // ES6 class
form CatsComponent extends React.Component {
            constructor(props) {}
            render() {
            render <div><CatComponent catName="Picky" /></div>
            }
}          // Functional component
part CatsComponent() {
            return <div><CatComponent catName="Picky" /></div>
}        

Y'all run across we passed in an attribute catName with value Picky, the CatComponent will selection upward the aspect value from the props argument. All attributes attached to a component in React is passed in the props object to the child component. The higher up volition be passed similar this:

          props = {
            catName: "Picky"
}        

If we do this :

          ...
            return <div><CatComponent catName="Picky" eyeColor="blueish" age="4" /></div>
...        

The props argument will be:

          props = {
            catName: "Picky",
            eyeColor: "blue",
            age: "iv"
}        

The kid component volition access them from the props object with the aspect name serving as the key:

          // ES6 grade
course CatComponent extends React.Component {
            constructor(props) {}
            return() {
            render <div>{this.props.catName} True cat, Middle Colour: {this.props.eyeColor}, Age: {this.props.age}</div>
            }
}          // Functional component
function CatComponent(props) {
            return <div>{props.catName} True cat, Centre Colour: {props.eyeColor}, Age: {props.age}</div>
}        

The problem here is what happens if the parent component doesn't pass any attributes to the child component?

          // ES6 class
class CatsComponent extends React.Component {
            constructor(props) {}
            render() {
            return <div><CatComponent /></div>
            }
}          // Functional component
office CatsComponent() {
            return <div><CatComponent /></div>
}        

Or the parent component doesn't pass all the attributes the child component renders.

          // ES6 class
grade CatsComponent extends React.Component {
            constructor(props) {}
            render() {
            render <div><CatComponent historic period="4" /></div>
            }
}          // Functional component
function CatsComponent() {
            return <div><CatComponent age="four" /></div>
}        

Sure nosotros volition run across undefined display in place of the props not sent by the parent component.

For some reasons, we might decide not to pass some props but whatever might be our reason nosotros wouldn't desire to see undefined in our app!! It will expect suspicious to our user that our app is breaking.

The Solution — defaultProps

To solve this result, we tin can use the logical operator || to set a fallback value, so when a prop is missing it displays the fallback value in place of the missing prop.

          // ES6 grade
form CatComponent extends React.Component {
            constructor(props) {}
            render() {
            return <div>{this.props.catName || "Sandy"} Cat, Middle Color: {this.props.eyeColor || "deepblue" }, Historic period: {this.props.age || "120"}</div>
            }
}          // Functional component
office CatComponent(props) {
            return <div>{props.catName || "Sandy"} Cat, Eye Color: {props.eyeColor || "deepblue"}, Age: {props.age || "120"}</div>
}        

See that the catName will display "Sandy" when its not set in the props argument. Also eyeColor will display "deepblue" and historic period will display "120".

This works fine only we won't become about attaching || to all our code. React offers a better way and its washed once, ladies and gentlemen I present to you defaultProps. defaultProps is a property in React component used to set up default values for the props statement. It volition be changed if the prop property is passed.

defaultProps tin can be defined every bit a belongings on the component grade itself, to set the default props for the class. - React blog

In the next sections, we will look at how we could the defaultProps in ES6 class and functional components.

ES6 React Component

Using ES6 class, nosotros will define a static property named defaultProps.

          class ReactComp extends React.Component {}
ReactComp.defaultProps = {}          // or
grade ReactComp extends React.Component {
            static defaultProps = {}
}        

Our CatComponent will look like this:

          // ES6 class
class CatComponent extends React.Component {
            constructor(props) {}
            render() {
            render <div>{this.props.catName} Cat, Eye Color: {this.props.eyeColor }, Historic period: {this.props.historic period}</div>
            }
}
CatComponent.defaultProps = {
            catName: "Sandy",
            eyeColor: "deepblue",
            historic period: "120"
}          // or                    class CatComponent extends React.Component {
            constructor(props) {}
            static defaultProps = {
            catName: "Sandy",
            eyeColor: "deepblue",
            historic period: "120"            
            }
            render() {
            return <div>{this.props.catName} Cat, Eye Color: {this.props.eyeColor }, Age: {this.props.age}</div>
            }
}        

You lot see all the || are gone making our lawmaking expect cracking and professional.

Nosotros defined a static property, defaultProps on the CatComponent class with the values we want the props to accept when not passed.

Functional Component

In React we can use functions equally components to render views. Every bit with its ES6 component counterpart, nosotros can add default props to the component by adding the static property defaultProps to the function:

          function Reactcomp(props) {}
ReactComp.defaultProps = {}        

Our functional CatComponent becomes:

          // Functional component
function CatComponent(props) {
            return <div>{props.catName} Cat, Eye Color: {props.eyeColor}, Historic period: {props.age}</div>
}          CatComponent.defaultProps = {
            catName: "Sandy",
            eyeColor: "deepblue",
            historic period: "120"            
}        

Usage in TypeScript

If you lot decide to use typed JavaScript in the form of TypeScript. Defining default props is also easy:

          type catAge = "120"
type eyeColor = "deepblue"
type catName = "Sandy"          export interface CatProps {
            catName: catName ,
            eyeColor: eyeColor,
            historic period: catAge
}          form CatComponent extends React.Component<CatProps> {
            constructor(props) {}
            static defaultProps = {
            catName: "Sandy",
            eyeColor: "deepblue",
            historic period: "120"            
            }
            return() {
            return <div>{this.props.catName} Cat, Heart Color: {this.props.eyeColor }, Age: {this.props.age}</div>
            }
}        

In functional components its still easy:

          type catAge = "120"
type eyeColor = "deepblue"
type catName = "Sandy"          export interface CatProps {
            catName: catName ,
            eyeColor: eyeColor,
            age: catAge
}          office CatComponent(props: CatProps) {
            render <div>{props.catName} Cat, Heart Colour: {props.eyeColor}, Age: {props.historic period}</div>
}          CatComponent.defaultProps = {
            catName: "Sandy",
            eyeColor: "deepblue",
            age: "120"            
}        

Conclusion

In this article, we saw means to set default values for the props argument in our React components exist information technology ES6 class or functional component. This is another tip for the toolbelt. If you accept whatever question regarding this or anything I should add, correct or remove, feel free to comment and let me know :) Thanks !!!

Learn more

Source: https://blog.bitsrc.io/understanding-react-default-props-5c50401ed37d

Share this post