Conditional position left/right in React style

Question

How to place properly property right/left into react's component style object?

const [pos, setPos] = useState(null);
useEffect(()=>{
  if(someCondition){setPos('left')}
  else{setPos('right')}
})
return (
  <div style={{`${pos}:0`}} />
)

My solution above does not work. I receive string and in style i need object prop. Can you please help?

radovix · Answer 1 · 2020-10-05T09:09:40.303

1

Code below should solve your problem. More info about how the variable's value can be used as object's key can be found on this StackOverflow link /question.

useEffect(()=>{
  if(someCondition){setPos('left')}
  else{setPos('right')}
})
return (
  <div style={{ [pos]: 0}} />
)

edited Oct 05 '20 at 09:09

answered Jul 31 '20 at 14:02

radovix

2,756
2
11
28

score 1 · Answer 2 · answered Jul 31 '20 at 14:03

1

You need to have style={{ [pos]: 0 }}. Also don't forget to add position: 'absolute' so

style = {{[pos]:0, position: 'absolute }}

answered Jul 31 '20 at 14:03

Tilak Madichetti · Accepted Answer · 2021-02-15T07:39:23.830

STOP ! useEffect is in an infinite loop

Each time you setPos(...) , the component re-renders and calls useEffect() again . You want to avoid that, hence you will have to pass in a secondary argument of [], to make it behave like componentDidMount which basically stop the useEffect effect from firing more than once. Coz now it depends on no elements i.e []

const [pos, setPos] = useState(null);

useEffect(()=>{
  if(someCondition){setPos('left')}
  else{setPos('right')}
}, []);

return (
  <div style={{ [pos] : 0 }} />
)

The infinite loop of changing pos was stopping your component from rendering properly.

Link : https://reactjs.org/docs/hooks-effect.html

(See the note at the end of the page)

Note

If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders. Learn more about how to deal with functions and what to do when the array changes too often.

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often. Also, don’t forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.

score 0 · Answer 4 · answered Oct 05 '20 at 09:15

Here is the solution,

useEffect(()=>{
  if(someCondition){setPos('left')}
  else{setPos('right')}
})
return (
  <div style={{ [pos]: 0}} />
)

you can also pass position in style for better styling, like <div style={{ [pos]: 0, position: 'absolute}} />`

As per my view, don't use useEffect() on every change. [The infinite loop of changing pos maybe affact your component from rendering properly]. just go through the doc once to have a clear and better understanding of react hooks. ref this link

Conditional position left/right in React style

4 Answers4