What are the different types of props can be send from one component to the other using properties in React?

user_6903497 0
Viewed 223

I have been using React for an year now. I have experienced sending below few types of props from one component to the other.

I have component A & B. Here component A is a parent of B. I send some props from A to B like string, number, Boolean, array, object and function.

Component A:

class A extends Component {
   render(){
       return(
            <div>
                 <B string="String Prop" number={123} Boolean={true} array=[] Object={} function={this.function} />
            </div>
       );
   }
}

My query is, is there any other types of properties can be send to a component apart from what I have mentioned?

react-proptypes react-props reactjs properties javascript
3 Answers

I'm not sure if you've just structured this question in a way that makes it a little difficult to understand but with React, you can send any complex object via the props.

Prop types are simply there as a way to strongly type what you expect to be passed down.

Check out the docs to see all the accepted prop types for React:

https://reactjs.org/docs/typechecking-with-proptypes.html

Taking specific note of the fact you can both create your own custom validator, or even set it to "any" which means it doesn't care what the type is as long as it's there:

// A value of any data type
  requiredAny: PropTypes.any.isRequired,

  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don't `console.warn` or throw, as this
  // won't work inside `oneOfType`.
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
user_98790870

you can pass some component also as props something like this:

   import Sample from './Sample'
    class A extends Component {
   render(){
      const propComponent = <Sample />
       return(
          <B component={propComponent} />
       );
     }
  }

You can do the same by passing it is children also:

import Sample from './Sample'
class A extends Component {
   render(){
       return(
          <B>
          <Sample/>
          </B>
       );
     }
  }
user_80347820

Any parameter that can be passed to a function can be passed to a react Component.

If you are asking what are the names (types) for each prop then you can check the PropTypes library under the usage section that lists most (if not all) of them.

user_31488070
Related