I need to render on a page a list of components (dynamically). For exemple a chatbot conversation (each item of the conversation would be a component instead of a simple text). Can I render dynamically one particular component (how?) or do I have to put all my components in top of each other in a Div and hide the components I dont want to render?
I think what you’re looking for is the “list” component, basically repeating an item for each object you have in an array.
Once you say which component you want to repeat they’ll ask you to put the array in it and then it ll display this component for each object in the array, and you can display the data from each object inside the component however you like.
And to handle cases where you want to display a text if it’s a text message or a picture if it’s an img or smth else, then you have to create your component with the different children possible (text, img, …) and you use conditionnal rendering to display the appropriate children. If item is text, render text component, if item is img render img component…
1 Like