children prop in React component

by

When you use a Custom component, like

<MyComponent>Hello World</MyComponent>

Whatever you write between the tags (in above case Hello World) is passed to the component as a children prop.

So when write your component like

const Link = ({ active, children, onClick }) => {

You are destructuring the props and getting only active, children and onClick from the props passed to the component

Consider for example, you call the Link component like

<Link active="true" onClick={someFunc} style={{color: 'orange'}}>Hello</Link>

Then amongst all the props i.e active, onClick, style, children, you will only be accessing active, onClick,children in the component.

For your second question:

and what does this do?

children: PropTypes.node.isRequired,

So here PropTypes is a way of performing a typeCheck on the props that are passed to the component. It is being imported from the react-proptypes package.

So 

children: PropTypes.node.isRequired

makes the prop children to be required. So if your render your component like

<Link />

It will not pass the type check and hence you need to do

<Link>Text</Link>

More Related Contents:

  1. React won’t load local images
  2. Insert HTML with React Variable Statements (JSX) [duplicate]
  3. How to render an array of objects in React?
  4. Why does useState cause the component to render twice on each update?
  5. What is the difference between state and props in React?
  6. React hooks – right way to clear timeouts and intervals
  7. Concatenating variables and strings in React
  8. How to set state of response from axios in react
  9. How to import a CSS file in a React Component
  10. How can I return multiple lines JSX in another return statement in React?
  11. React: how to load and render external html file?
  12. Binding vs Arrow-function (in JavaScript, or for react onClick)
  13. How to allow CORS in react.js?
  14. How To Solve The React Hook Closure Issue?
  15. css position absolute making the textbox go down
  16. Can’t resolve module (not found) in React.js
  17. React-router v4 – cannot GET *url*
  18. Rendering an array.map() in React
  19. Does new React Context API trigger re-renders?
  20. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  21. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  22. React.js Serverside rendering and Event Handlers
  23. React, losing saved data in localStorage with useEffect after page refresh
  24. es6 – import all named module without alias
  25. Detect change in query param react-router-dom v4.x and re-render component
  26. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  27. Webpack 5 – Uncaught ReferenceError: process is not defined
  28. Using document.querySelector in React? Should I use refs instead? How?
  29. How to load es6, react, babel code in html with cdn?
  30. How to render element on click of button: ReactJS

Leave a Comment