Left space between two texts (Dynamic)-CodePudding

const Btn = () => {

    const options = ['test1', 'test2', 'test3'];

    return (
         <div style={{ position: 'absolute', left: '8px', widht: 'auto', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#006C84' }}>
            {options.map(opt => (
                <span style={{ paddingRight: '10px' }}>{opt}</span>)
            )}
         </div>
     )
    }

Above is my code and after the end of the text, there is some extra space are left. How to remove that space.

CodePudding user response：

So you are giving paddingRight: 10px to the span, so at the end of the last child it's showing some space left.

There are two ways you can achive this

JS way
Css way

JS way

{options.map((opt,index) => (
        <span style={{ paddingRight: options.length - 1 === index ? '10px' : "0px" }}>{opt}</span>)
   )}

Css way you need to change the inline style to explicit style for this, I would say this is the recommended way of giving css over inline style or may be you can create one style object for that.

  <div className="parent">
        {options.map(opt => (
            <span style={{ paddingRight: '10px' }}>{opt}</span>)
        )}
     </div>

.parent{//parent css goes here}
.parent span:not(::last-of-type){padding-right: 10px}

CodePudding user response：

  const Btn = () => {

    const options = ['test1', 'test2', 'test3'];

    return (
         <div style={{ position: 'absolute', left: '8px', widht: 'auto', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', backgroundColor: '#006C84', display: 'flex', gap: '10px' }}>
            {options.map(opt => (
                <span>{opt}</span>)
            )}
         </div>
     )
   }

use display: flex and gap inside the parent div style

https://codesandbox.io/s/keen-ganguly-kl4ys7?file=/src/App.js