Conditions can be used to render elements depending on a state you want to check before rendering, this can be useful for login, log out, greeting,and preventing a componenet from rendering it can be done using the classic if statement or the && operator which executes the expression after it only if the expression before results in true.
map or looping generally, can be used to render multible elements, this can be useful when the components rendered holds data that is related to a list.
When dealing with such approach it is a good practice to give each rendered component a unique key, this helps identifying each component, otherwise, a warning will appear and this may raise some issues later.
Forms are a way of collecting data from users, in HTML forms hold an internal state, it can be used in React, but letting the Ract states be the only source of truth is the better practice, this works fine with select, input, and textarea, those are all called controlled components. input type = "file" on the other hand is uncontrolled component and its value is a read-only.
Sometimes, a number of components share the same piece of data, and any change on data must be reflicted on all its common components, to do this, keep this data on the state of a common ancestor to the components, now all the components can access this piece of data and render accordingly.
You can use props.children and pass elements as props to other components, this can be useful when the number of children is not specified early. Same happens when a component is a special case of another component, a set of props can be defined in the parent component, and part of them can be modified by a child component.