Hi I am creating my first application in React. The application generates css styles. It consists of components like border radius, box shadow etc. The components can be combined with each other. Variables from each component are sent via redux to an array and then rendered. I would like to add the possibility of choosing any components and combining them with each other. My problem is with component id. I don't know how to generate id dynamically depending on components order. I need it to update array in redux. There will be an option to delete any components there, so I can't type this statically. I tried to do it using map(), but each component has a different name and I have no idea how to do it. Is it even possible?
Thanks in advance and sorry for my English
const components = [<Transform id={0} />, <BorderRadius id={1} />];
const renderComponents = components.map((component, index) => component);
I don't recommend you to map different components, but if you really have to, wrap it in a fragment like this.
const components = [<Transform />, <BorderRadius />];
const renderComponents = components.map((component, index) => (
<React.Fragment id={index}>
{component}
</React.Fragment>
));
See more about fragments here