Menu
I'd like to inject a separator between each element of an array using an array.join-like syntax.
Something like the following:
render() { let myArray = [1,2,3]; return (<div> {myArray.map(item => <div>{item}</div>).join(<div>|</div>)} </div>); } I've got it working using a lodash.transform approach, but it feels ugly, I'd like to just do .join(<some-jsx>) and have it insert a separator in between each item.
946
However, splice will change the contents of the array it's called on. You need to set the state on the updated array, not on what splice returns. Below is a working snippet to demonstrate how you can insert a new element at a selected index using splice within a React component.
Inline If with Logical && Operator It works because in JavaScript, true && expression always evaluates to expression , and false && expression always evaluates to false . Therefore, if the condition is true , the element right after && will appear in the output. If it is false , React will ignore and skip it.
join() The join() method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string.
To render an array of components in React you simply need to pass the array into JSX by wrapping it in curly braces, just be sure that your components each have a unique key prop because React will use this when rendering it to avoid bugs.
Trying to .join with React Elements is probably not going out pan out for you. This would produce the result you describe needing. Show activity on this post. You can also do it by combining .reduce and React fragments. Show activity on this post. Using Array.map and React.Fragment you can join each array item with any JSX element you want.
We can use the JavaScript standard Array functions in the ReactJS. However, we have to do some extra work to manipulate the Array in ReactJS, why because the ReactJS uses the useState Hook to update the variable values. In this tutorial, we are going to see the following topics. Iterate String and Array of Objects. Add a new row to Array.
Using something like a loop against an array or an object means you only have to write the HTML per item one time. Better yet, any future edits only have to be applied once. To render multiple JSX elements in React, you can loop through an array with the .map () method and return a single element.
Better yet, any future edits only have to be applied once. To render multiple JSX elements in React, you can loop through an array with the .map () method and return a single element.
You can also use reduce to insert the separator between every element of the array:
render() { let myArray = [1,2,3]; return ( <div> { myArray .map(item => <div>{item}</div>) .reduce((acc, x) => acc === null ? [x] : [acc, ' | ', x], null) } </div> ); } or using fragments:
render() { let myArray = [1,2,3]; return ( <div> { myArray .map(item => <div>{item}</div>) .reduce((acc, x) => acc === null ? x : <>{acc} | {x}</>, null) } </div> ); } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
