Does multiple conditional values on same property in JSX inline style possible in React?

Aden Lee 0
Viewed 16

What I'm trying to do is when I have a string

'Hello. this is stackoverflow.' I want input to have 24px for font-size

when I have 'Hello. this is stackoverflow. I'm here to ask some questions.'

I want input to have 15px for font-size

however,

style={{ fontSize: string.length > 35 ? '15px' : '24px' }}

all I can do is just only one conditional style for font-size.

Is there any possible solutions? (Maybe conditional className. But I want to know how to get through this question by using inline style in JSX.)

inline-styles jsx reactjs javascript css
1 Answers

You can have a function that returns a style object based on the length of the string.

function Example({ strs }) {
  
  function getStyle(str) {
    if (str.length && str.length <= 35) {
      return { fontSize: '24px' };
    }
    if (str.length > 35) {
      return { fontSize: '15px' };
    }
    return null;
  }
  
  return (
    <div>
      <p style={getStyle(strs.one)}>{strs.one}</p>
      <p style={getStyle(strs.two)}>{strs.two}</p>
      <p style={getStyle(strs.three)}>{strs.three}</p>
    </div>
  );

}

const strs = {
  one: 'Hallo. This is Stack Overflow.',
  two: 'Hallo. This is Stack Overflow. I\'m here to ask some questions',
  three: ''
};

ReactDOM.render(
  <Example strs={strs} />,
  document.getElementById('react')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

userkfM50
Related