CODEWITHSUNDEEP
reactjsreact-context
Deeswoc
Deeswoc

Reputation: 180

Setting context state with vs without constructor

When I try to initialize my state without a constructor I get issues with the functions not binding to the state. Doing the following doesn't work despite the fact that tutorials like this initialize the state directly without the constructor.

This doesn't pass the functions to the consumer:

class NewTownFormContextProvider extends Component {
        state = {
            towns:[],
            name: '',
            parish: '',
            categories:[],
            catList:[],
            resetForm: this.resetForm,
            updateTown: this.updateTown,
            updateParish: this.updateParish,
            setCategory: this.setCategory,
            submit: this.submit

        }


    resetForm = ()=>{
        this.setState({
            name:'',
            parish:'',
            categories:[]
        })
    }

    updateTown = (e) =>{
        this.setState({town: e.target.value});
        console.log(this.state.town);
    }
    updateParish = (e) =>{
        this.setState({parish: e.target.value});
        console.log(this.state.parish);
    }

    setCategory = (e) =>{
        this.setState({category: e.target.value});
        console.log(this.state.category);
    }

    submit = async (e) => {
        e.  preventDefault();
        this.setState([...this.state.towns, {name: this.state.town, parish: this.state.parish}])
        }
    }

    async componentDidMount(){
        let data = await fetch(`${d}/town/get-categories`);
        let catList = await data.json();
        this.setState({ catList });
    }
    render(){
        return(
            <NewTownFormContext.Provider value={{...this.state  }}>
                {this.props.children}
            </NewTownFormContext.Provider>  
        );
    };
}

But this does:

class NewTownFormContextProvider extends Component {
    constructor(props){
        super(props);
        this.state = {
            towns:[],
            name: '',
            parish: '',
            categories:[],
            catList:[],
            resetForm: this.resetForm,
            updateTown: this.updateTown,
            updateParish: this.updateParish,
            setCategory: this.setCategory,
            submit: this.submit

        }
    }


    resetForm = ()=>{
        this.setState({
            name:'',
            parish:'',
            categories:[]
        })
    }

    updateTown = (e) =>{
        this.setState({town: e.target.value});
        console.log(this.state.town);
    }
    updateParish = (e) =>{
        this.setState({parish: e.target.value});
        console.log(this.state.parish);
    }

    setCategory = (e) =>{
        this.setState({category: e.target.value});
        console.log(this.state.category);
    }

    submit = async (e) => {
        e.  preventDefault();
        this.setState([...this.state.towns, {name: this.state.town, parish: this.state.parish}])
 }
    }

    async componentDidMount(){
        let data = await fetch(`${d}/town/get-categories`);
        let catList = await data.json();
        this.setState({ catList });
    }
    render(){
        return(
            <NewTownFormContext.Provider value={{...this.state  }}>
                {this.props.children}
            </NewTownFormContext.Provider>  
        );
    };
}

I'm not sure why the tutorials specify the first method.

Upvotes: 1

Views: 139

Answers (1)

HMR
HMR

Reputation: 39260

You need to define the functions before the state:

class App extends React.Component {
  resetForm = () => {
    console.log('reset form');
  };
  state = {
    resetForm: this.resetForm,
  };

  render() {
    this.state.resetForm();
    return 'hi';
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>

This looks like an x y problem, not sure why you need to add class methods to state.

Upvotes: 1

Related Questions