refactoring the App() function in React and Typescipt

Question

My React/Typescript app has several sections. So the

export default function App() {}

has become very long. All tutorials I have watched do not go further to refactoring this. And I have had trouble searching the right thing.

But I am having trouble refactoring the first element.(just a snippet)

my code currently: App.tsx

import React from 'react';
import Button from 'react-bootstrap/Button';

export default function App() {
  const [count, setCount] = React.useState(0);
  const minusnum = () => {
    if (count > 0) setCount(count - 1);
  };
  const addnum = () => {
    setCount(count + 1);
  };

return (
  <div>
     <Button onClick={minusnum}>minus</Button>
     <Button onClick={addnum}>add</Button>
     <input type="number" min="0" step="1" name="clicks" value={count} onChange={(event) => {const value = Number(event.target.value); setCount(value);}}></input>
  </div> );

}

Now I want App.tsx to look something like:

import React from 'react';
import Button from 'react-bootstrap/Button';
import Counter from "./parts/Counter";

export default function App() {
   <CounterSection>
       <Counter/>
   </CounterSection>
}

and inside./parts/Counter there is an index.tsx file

import React from 'react';
import Button from 'react-bootstrap/Button';

  const [count, setCount] = React.useState(0);
  const minusnum = () => {
    if (count > 0) setCount(count - 1);
  };
  const addnum = () => {
    setCount(count + 1);
  };

const Index = () => {
  return (
    <div>
     <Button onClick={minusnum}>minus</Button>
     <Button onClick={addnum}>add</Button>
     <input type="number" min="0" step="5" name="clicks" value={count} onChange={(event) => {const value = Number(event.target.value); setCount(value);}}></input>
  </div> )
};

export default Index;

Which ends up showing nothing. how do I deal with the event handling stuff in the index file?

Answer 1

First of all, as far as I can tell, the CounterSection component you're using hasn't been defined yet and you are not actually return ing anything from your App component.

This is most likely the reason nothing is being rendered on your end.

// App.tsx
export default function App(){
    return (
        <div> // Change this back to CounterSection if you have it defined.
            <Counter/>
        </div>
    );
}

Second, ensure that all your hooks and functions are declared and called inside the component that is using them.

// parts/Counter/index.tsx
const Index = () => {
    // State hook
    const [count, setCount] = React.useState(0);
    
    // Function (method) declaration
    const minusNum = () => setCount(currentCount => {
        let newCount = currentCount - 1;
        return Math.max(0, newCount); // Same thing as what you had before.
    });
    const addNum = () => setCount(currentCount => currentCount + 1);

    return (
        <div>
            <Button onClick={minusNum}>minus</Button>
            <Button onClick={addNum}>add</Button>
            <input type="number" step="5" value={count} onChange={({ target }) => setCount(Number(target.value))} />
        </div> 
    );
};

The last thing you may have noticed me do is provide a callback in setCount instead of the count variable.

Now, while your approach would have worked, it's a good habit to try and break into (where possible) and will help you mitigate any stale state you encounter in the future.