setState is not defined with reactJS

Question

I'm working with reactJS and I am trying to use setState so that i can use that state to determine which way the graph needs to rotate but I get an error saying 'setState' is not defined no-undef. Do I need to have a constructor to initialize the state?

Code:

class App extends React.Component {
    render() {
        const {rotate, setRotate} = setState(false)
        return (
            <div className="custom-container">
                <Tree 
                    data={data} 
                    height={600} 
                    width={1000}
                    svgProps={{transform: 'rotate(${rotate ? "90" : "0")'}} 
                />
                <button onClick={() => setRotate(!rotate)}>Rotate</button>
            </div>
        );
    }    
}

Although the error message is probably because you haven't imported setState, you can't use setState in class components. — Guy Incognito
– Guy Incognito, Commented Dec 3, 2020 at 21:00
@GuyIncognito You mean useState right? @kr419 read reactjs.org/docs/state-and-lifecycle.html — Dominik
– Dominik, Commented Dec 3, 2020 at 21:03
In class components as you have, setState is a member of the React.Component class and should be called using the context of that class, via this.setState(). — bradcush
– bradcush, Commented Dec 3, 2020 at 21:04
You're mixing syntaxes really badly, please read through the React documentation thoroughly so you can understand how to use it's different pieces. — Brian Thompson
– Brian Thompson, Commented Dec 3, 2020 at 21:10

Madhuri · Accepted Answer · 2020-12-03 21:04:48Z

3

If you are trying to use, "useState" instead of setState, 'useState' is used for having a state in functional components, you will have to convert class component to function component as below and then use 'useState'

export default function App() {

        const [rotate, setRotate] = React.useState(false)
        return (
            <div className="custom-container">
                <Tree 
                    data={data} 
                    height={600} 
                    width={1000}
                    svgProps={{transform: 'rotate(${rotate ? "90" : "0")'}} 
                />
                <button onClick={() => setRotate(!rotate)}>Rotate</button>
            </div>
        );
}

answered Dec 3, 2020 at 21:04

Madhuri

1,1107 silver badges18 bronze badges

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

Comments

user3123744 · Accepted Answer · 2020-12-03 21:09:47Z

2

You could also try this:

class App extends React.Component {
    state = {
      rotate: false
    };

    render() {
        return (
            <div className="custom-container">
                <Tree 
                    data={data} 
                    height={600} 
                    width={1000}
                    svgProps={{transform: 'rotate(${rotate ? "90" : "0")'}} 
                />
                <button onClick={() => this.setState({ rotate: !this.state.rotate})}>Rotate</button>
            </div>
        );
    }    
}

answered Dec 3, 2020 at 21:09

user3123744

896 bronze badges

Comments

Bkessler · Accepted Answer · 2020-12-03 21:29:39Z

2

I think you are trying to use useState();

Make sure you import useState at the top first and also use function component instead of the class component :

import React, {useState} from 'react';



function App() {
    const [rotate, setRotate] = useState(false)
    return (
        <div className="custom-container">
            <Tree 
                data={data} 
                height={600} 
                width={1000}
                svgProps={{transform: 'rotate(${rotate ? "90" : "0")'}} 
            />
            <button onClick={() => setRotate(!rotate)}>Rotate</button>
        </div>
    );

answered Dec 3, 2020 at 21:29

Bkessler

335 bronze badges

Collectives™ on Stack Overflow

setState is not defined with reactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related