Keep action from function after re-render - React

Question

Context : I have a side bar, and multiple links in it. For example, if I click on User, the main page will load datas from users and display in a table. If I click on Addresses, same with all addresses.

What I want to do : I want to set a substring on all spans with a length > 30, so the table is not too long when I receive a long description for example.

My code : I created a Layout component as container for my App component like this :

function MyApp({ Component, pageProps }: AppProps) {
  return(
    <Layout>
      <Component {...pageProps} />;
    </Layout>
  )
}

And I apply my logic for substring in my layout component :

function Layout(props) {
  
  const subString = (spansList) => {
    for (const s of spansList) {
      if (s.textContent.length > 30) {
        return s.textContent = s.textContent.substring(0, 30) + "..."
      }
    }
  }
  
  const allWithClass = Array.from(
    document.getElementsByClassName('MuiTypography-body2')
  );
  
  useEffect(() => {

    subString(allWithClass)
  
  }, [allWithClass])

  return (
[...]

My problem : This code works, but when I re-render by clicking on an other menu in my sidebar, the function subString is no longer applied.

I don't now how to make it persistent.

Thank you for your time

Mina · Accepted Answer · 2022-10-11 10:13:45Z

1

I think what you need is a state which changes depending on the link you click on it, and set this state as a dependence to the useEffect hook, so when you click other link the useEffect hook re-execute

answered Oct 11, 2022 at 10:13

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Johan Over a year ago

thank you for your idea ! How can I store in a useState the current location, since react returns "window is not defined" ?

Mina Over a year ago

@Joh Why do you want to store the window.location, do you use a server-side rendering framework, like next.js for example?

Johan Over a year ago

yes I'm using Next.js. window.location is the way I usualy use to get URL

Mina Over a year ago

@Joh window should be defined on the useEffect hook.

Collectives™ on Stack Overflow

Keep action from function after re-render - React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related