How to maintain vertical spacing between components when new info is being added to one: REACT

I am building a bill splitting app for a react exercise. Most of the core functionality is done, but I am not 100% sure how to keep the top component from overflowing onto my bottom component when i continue to add more users. If anyone knows the solution to this and can explain to me why I would really appreciate that.

I plan to actually put effort into the UI eventually, but my main goal was to practice react concepts I am currently learning. The behavior of the top component is concerning to me though and would like to know why it is happening and how to avoid it in the future.

Also, I am aware that when a new user is selected, the previous peer expense temporarily remains on the screen. I can go into more detail about that if desired, but basically when I had it stored as state I would get an infinite loop error(idk why), but when I derived it from pre-existing state the infinite loop error was fixed. The price for that was an uncontrolled input instead of a controlled one.

Below are links to the site my app is hosted on and my github repo.
Thanks!

there is a typo here I guess
if(selectTag.value === )
line 152 App.js

Throughout your code, you are using alot of vanilla DOM manipulation in the mix with React features, that could cause a bunch of unexpected behaviour and not considered good practice afaik

All of your App lives inside div.root, so it is “react land”, I would also revise your usage of useFeect, since useEffect is meant to be used to handle sync with outside-of-react-scope stuff
Consider to read up on this:

1. when I set the state, I am first looping through the objects in the current state that’s from your comments in the repo
and I guess it is implemented here:

if (whoPays === "you") {
        setPeers(
          peers.map((i, index) =>
            index === selectFriend
              ? Object.assign(i, { ...i, money: i.money + peerBill })
              : { ...i }
          )
        );
      }

      if (whoPays === "peer") {
        setPeers(
          peers.map((i, index) =>
            index === selectFriend
              ? Object.assign(i, { ...i, money: i.money - peerBill })
              : { ...i }
          )
        );
      }

When you are setting state based on previous state, you should pass previous state into the setter as a parameter

const handleStuff = () => {
     setState((previousState) => {
          // here you should access all needed stuff from previousState
         // for example if previous State is an object and you need some properties
         // you access it as previousState.someProperty, not from somewhere else
     })
}
1 Like

Thank you so much for all the information. I will read up on all of it and be sure to use the best practices moving forward. I have just recently learned about the concept of useRef hooks. Would a useRef be beneficial in replacement of the vanilla DOM manipulation? How could I achieve the same behavior of the disabled class on the button based off those element values and length of the values? I noticed that the useRef value is always one step behind the onChange value, I am not sure how to get the actual live value from the ref while using an onChange instead of using the useEffect and vanilla DOM manipulation.

Also thank you for pointing out the previous state for the state objects, this was something I did not understand either when working with state objects vs just single state

Also from the who pays example you pointed out, is this what it should look like?

 if (whoPays === "you") {
        setPeers( (prev) =>  peers.map((i, index) =>
            index === selectFriend
              ? Object.assign(prev.i, { ...prev.i, money:  prev.i.money + peerBill })
              : { ...prev.i }
          )
        );
      }

I am confused on how to write the syntax here

you have state in react. You can have state variables to toggle classnames. Deal with it using useState.

...
<element className={someBooleanStateVariable===true?"disabled":"enabled"}>stuff</element>
...

if you are dealing with child components you can change stuff there based on props passed from above the tree

const LengthSettings = ({name, duration, changeDuration}) => {
  const bgColor = name === 'session'
    ? "bg-blue-300"
    : "bg-amber-300";
..............
  <h3 id={`${name}-label`}
        className={`${bgColor} text-center text-xl font-medium italic capitalize rounded-md`}
      >

You have JSX in react, you can do all kinds of interactive stuff with it without touching vanilla DOM, that’s the whole point of it

I f you would use CSS lib like tailwind with react you could manipulate classes like that all the time in order to change styles dynamically.
For your purposes that will do.

1 Like

Use min-height on the two containers instead of height.

It is still a fixed height when using height even if the unit you are using is vh. What that computes to will only change if/when the viewport height changes (and the page content does not affect that).

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.