I need an explanation to React props like I am five
I'm struggling with fully understanding props (React)
How many props is recommended in a React component?
Serious: why are we passing data through props?
Videos
Hey Guys,
I don't know why React props are so confusing. But wouldn't it make more sense if I just imported the component into what I intend to use it for rather than using props and creating a mess in App.js?
I was watching this guys video and countless others that do very similar things. They write in App.js and then use Props in their component to print the same code. It would make much more sense if they just imported.
TLDR: Kindly explain React Props, or send me a detailed link, some practices problems would help too
Thank You
I understand the concept behind props; where you have some values and you pass it on to another component. You then include props.value for that component and you have access to it. I understand all of that just fine.
But I feel as though I must be missing something and I hope someone can help me understand how I can properly implement props, either through an explanation or another source.
I'm working on a forum and I have a component called BoardDetail.js. Inside that component I have a useState([]) called topic which holds an array. Still inside BoardDetail I have another function called addTopic which creates an object that gets added to the array. The array gets mapped on screen for the user to see a list of all topics. Pretty basic stuff.
Inside each object I'm also holding the data for the message of the topic. Because I need to click on the topic in order to read the message I need to use another component, which is where my MessageDetail.js component comes into play. Since this is a new component I need to access the props of topic for message so I can display the message on screen for the user to read. But when I tried passing the props my entire project got very cluttered and not only were all the topics being shown on screen, because I passed it via <MessageDetail message={message} /> in the BoardDetail component but all the messages were being shown as well.
I know I must be doing something wrong but every source I find just explains the very basics of props.
tl;dr - Please help props click with me.
Note that this is only aesthetics issue, you can send as many parameters as you like, but there are best practices.
As you said, it's just like parameters to a function. Well, props are parameters. I would suggest using the minimum possible as long as it's readable.
Sometimes having 2 parameters (props) might even be confusing, say you send age and systemConfig to a component, these props are not related and might confuse the developer that will look at it in the future (This will probably be you)
And sometimes, having 7 props is ok because it's readable and all in the same domain. for example: you might send many person properties like age, height, weight etc. and it'll be fully readable.
Also, you might say, ok what if I'll send 50 parameters for that person component, in this situation you might be better sending the Person object as it is and let the component "dig" into the object and take all the variables that it requires.
I follow this rule of thumb: Three props is fine. Five props is a code smell. More than seven props is a disaster.
Of course this is not universal solution but my advice is that you must keep your component clear and easy to maintain. If the number of props are making the component bloated then you have reached your limit.
Proper composition should help you avoid passing props through multiple components. Try to handle events at the lowest possible point in the component tree.
Also to keep in mind if the component itself has a lot ot props then either:
- Your components are each doing too much, and/or
- Your components know too much about, and manage too much for, their children.