Breaking News: Grepper is joining You.com. Read the official announcement!

ReactJS default props

Add Answer

Wild Zephyr answered on April 10, 2022 Popularity 8/10 Helpfulness 4/10

answer ReactJS default props

related Pass Props to a Component Using defaultProps in react

related defaultProps in react

ReactJS default props

Comment

function Avatar({ person, size = 100 }) {
  // ...
}

// See documentation for more details.
// https://react.dev/learn/passing-props-to-a-component#specifying-a-default-value-for-a-prop

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: react.dev

Tags: default javascript reactjs

Link to this answer
Share Copy Link

Contributed on Jun 21 2024

Wild Zephyr

0 Answers Avg Quality 2/10

Closely Related Answers

Pass Props to a Component Using defaultProps in react

Comment

-1

const Banner = ({ name }) => {
  return <div>Hello {name}</div>
}

function App() {
  return (
    <div>
      <Banner />
    </div>
  )
}

Banner.defaultProps = {
  name: "user",
}
export default App

Popularity 10/10 Helpfulness 3/10 Language javascript

Source: softhunt.net

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 10 2022

Outrageous Ostrich

0 Answers Avg Quality 2/10

defaultProps in react

Comment


class Button extends React.Component {
  render() {
    return (
      <button>
        {this.props.text}
      </button>
    );
  }
}

// defaultProps goes here:

Button.defaultProps = {text:'I am a button'}
ReactDOM.render(
  <Button text=""/>, 
  document.getElementById('app')
);

Button expects to receive a prop named text. The received text will be displayed inside of a <button></button> element.

What if nobody passes any text to Button?

If nobody passes any text to Button, then Button‘s display will be blank. It would be better if Button could display a default message instead.

You can make this happen by giving your component class a property named defaultProps:

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
 
Example.defaultProps;

The defaultProps property should be equal to an object:

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
 
// Set defaultProps equal to an object:
Example.defaultProps = {};

Inside of this object, write properties for any default props that you’d like to set:

class Example extends React.Component {
  render() {
    return <h1>{this.props.text}</h1>;
  }
}
 
Example.defaultProps = { text: 'yo' }; 

If an <Example /> doesn’t get passed any text, then it will display “yo.”

If an <Example /> does get passed some text, then it will display that passed-in text.







---------------------------------------------------------------------
Creating defaultProps in class-based component:

import React, { Component } from 'react';
  
class App extends Component {
  render() {
    return (
      <div >
        <Person name="kapil" eyeColor="blue" age="23"></Person>
        <Person name="Sachin" eyeColor="blue" ></Person>
        <Person name="Nikhil" age="23"></Person>
        <Person eyeColor="green" age="23"></Person>
      </div>
    );
  }
}
  
class Person extends Component {
  render() {
    return (
      <div>
        <p> Name: {this.props.name} </p>
        <p>EyeColor: {this.props.eyeColor}</p>
        <p>Age : {this.props.age} </p>
      </div>
    )
  }
}
  
Person.defaultProps = {
  name: "Rahul",
  eyeColor: "deepblue",
  age: "45"
}
  
export default App;



Creating defaultProps in Functional Component: 
function App(props) {
  return (
    <div >
      <Person name="kapil" eyeColor="blue" age="23"></Person>
      <Person name="Sachin" eyeColor="blue" ></Person>
      <Person name="Nikhil" age="23"></Person>
      <Person eyeColor="green" age="23"></Person>
    </div>
  );
}
  
function Person(props) {
  return (
    <div>
      <p> Name: {props.name} </p>
      <p>EyeColor: {props.eyeColor}</p>
      <p>Age : {props.age} </p>
      <hr></hr>
    </div>
  )
}
  
Person.defaultProps = {
  name: "Rahul",
  eyeColor: "deepblue",
  age: "45"
}
  
export default App;

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.geeksforgeeks.org

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Mar 14 2023

M Hassan khan

0 Answers Avg Quality 2/10

ReactJS default props

Contents

More Related Answers

ReactJS default props

Closely Related Answers

Pass Props to a Component Using defaultProps in react

defaultProps in react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.