Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

react typescript what type is setState?

I am passing a setState as a prop from a parent component to modify the state on a child component of that parent, on typescript when creating a interface, what is the type of setState?

function App() {
    const [links, setLinks] = useState();

    return (
        <div className='App'>
            <Sidebar setLinks={setLinks} />
            <Main />
        </div>
    );
}

on child:

interface SidebarProps {
    setLinks: ??????;
}


const Sidebar: React.FC<SidebarProps> = ({ setLinks }) => {
    return (
        <div style={sidebar}>
            <button onClick={() => setLinks('1')}>pic1</button>
            <button onClick={() => setLinks('1')}>pic2</button>
        </div>
    );
};
like image 769
nishi Avatar asked Sep 03 '26 22:09

nishi


2 Answers

This is my example based on Kyrill's answer.

interface Props {
  editMode: boolean
  setEditMode: React.Dispatch<React.SetStateAction<boolean>>
}

export default function NavToolbar(props: Props): ReactElement {
 
...

I'm sure there are better ways to do this though :)

like image 82
Jammar Avatar answered Sep 06 '26 12:09

Jammar


Refer the below code:-

function App() {
    const [links, setLinks] = useState<string>();

    return (
        <div className='App'>
            <Sidebar setLinks={setLinks} />
            <Main />
        </div>
    );
}


interface SidebarProps {
    setLinks: Function;
}


const Sidebar: React.FC<SidebarProps> = ({ setLinks }) => {
    return (
        <div style={sidebar}>
            <button onClick={() => setLinks('1')}>pic1</button>
            <button onClick={() => setLinks('1')}>pic2</button>
        </div>
    );
};
like image 35
Sarun UK Avatar answered Sep 06 '26 12:09

Sarun UK



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!