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


This Content is from Stack Overflow. Question asked by Aden Lee

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


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.)


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 (
      <p style={getStyle(strs.one)}>{strs.one}</p>
      <p style={getStyle(strs.two)}>{strs.two}</p>
      <p style={getStyle(strs.three)}>{strs.three}</p>


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

  <Example strs={strs} />,
<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>

This Question was asked in StackOverflow by Aden Lee and Answered by Andy It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?