Playing around with ReactJS.
I have a conditional that checks if stepMsg is an array or not and then creates either a list (when type = li) or a div, or just uses stepMsg when it isn't an array.
The other code is a for loop that replaces {input...} inside of stepMsg with other words. It's only working if stepMsg isn't an array.
Now my question: How can I combine these two codes?
// stepMsg could be 'Hello {input1}' or ['Hello', '{input2}']
// savedInputs is an array with dynamic content [{id: 1, value: 'yo'}{}...]
if (stepMsg.constructor === Array) {
if (this.props.type === 'li') {
stepMsg = stepMsg.map((index, key) => (
<UL key={key}><Li><InsideLi>{index}</InsideLi></Li></UL>
));
} else {
stepMsg = stepMsg.map((index, key) => (
<div key={key}>{index}</div>
));
}
}
// only works without ARRAY
for (var element of savedInputs) {
stepMsg = stepMsg.replace(new RegExp('{input' + element.id + '}', 'g'), element.value);
}
this.state = {
message: <div>{stepMsg}</div>
};
React is pure JavaScript. How about to put the for in the else branch of the check array if? Or may I misunderstood your question?
I don't think I fully understand the question, but can point out a few things:
My React Pointers
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:
About Your Question
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> });