I don't think I fully understand the question, but can point out a few things:
this.setState({ ...newState }) <ul> outside the map function and the key attribute should be on the <li> element.If the prop type is an <li> element, you should just make another component in my opinion. React is "declarative" as they say and the beauty is that when done correctly you shouldn't even be in this situation.
You can also render children, and compose your component that way...
There's a ton of resources online, but I would recommend you keep messing around and building stuff, and use online courses to get some structure:
In terms of what to do with combining: You need to perform the same check inside the savedInputs loop and move that above stepMsg. If it's an array you use .map and .replace inside that for the strings, if it's a string you use just use .replace:
I'm also using ES6 syntax, which if you're into React you need to learn, in my opinion.
I noticed some errors in the syntax, corrected below. Also, I haven't tested this it's theoretical code.
Lastly, I think a lot of this should be done in a parent component, componentDidMount, and the rest in the render() function.
The courses above will go through these life-cycle methods, and as always read the docs!
Good luck, hope that made sense...
// stepMsg could be 'Hello {input1}' or ['Hello', '{input2}']
// savedInputs is an array with dynamic content [{id: 1, value: 'yo'}{}...]
// init
let replacedStepMsg;
let formattedStepMsg;
// === STEP 1 ===
// Let's replace everything first
// Replace helper
const replaceValuess = (str) =>
savedInputs.reduce(el => str.replace(new RegExp('{input' + el.id + '}', 'g'), el.value));
// Replace all text strings first, whether Array or not.
if (Array.isArray(stepMsg)) {
replacedStepMsg = stepMsg.map(msg => {
return replaceValues(msg);
});
} else {
replacedStepMsg = replaceValues(stepMsg);
}
// === STEP 2 ===
// By now everything is replaced, now we can build our HTML
if (Array.isArray(replacedStepMsg)) {
if (this.props.type === 'li') {
formattedStepMsg = <ul>{replacedStepMsg.map((msg, index) => (
<li key="{index}">{msg}</li>
))}</ul>;
} else {
formattedStepMsg = replacedStepMsg.map((msg, index) =>
<div key="{index}">{msg}</div>
);
}
}
this.setState({
message: <div>{formattedStepMsg}</div>
});