I am trying to setState in an arrow function ponent but getting an error "setState is not defined".

I tried setting state in handleChange using setState({ selectedSlot }) and this.setState({ selectedSlot }) but nothing worked.

 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

 let state = {
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 };

 let handleChange = (event, value) => {
   let selectedSlot = state.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

I am trying to setState in an arrow function ponent but getting an error "setState is not defined".

I tried setting state in handleChange using setState({ selectedSlot }) and this.setState({ selectedSlot }) but nothing worked.

 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

 let state = {
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 };

 let handleChange = (event, value) => {
   let selectedSlot = state.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

• javascript
• reactjs
• arrow-functions

• 2 please, read about statles and statefull ponents. You have stateles ponent, without state. Use hooks or class – Petrashka Siarhei Commented Aug 7, 2019 at 12:09

4 Answers 4

To implement stateful logic inside functional ponents use hooks:

 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

 const [state, setState] = React.useState({
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 })


 let handleChange = (event, value) => {
   const _state = {...state}
   let selectedSlot = _state.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ ..._state, selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

you cannot use setState inside functional ponent.In order to do so you have to use useState of react hook.

import React,{useState} from 'react'
 const AddAssetActivity = props => {
 let { variations, slots, priceStructure } = props;

const [state,setState]=useState({
 selectedSlot:{},
 cal:1

})

 let handleChange = (event, value) => {
  const newState = {...state}
   let selectedSlot = newState.selectedSlot;
   selectedSlot[value.variation] = value.slot;
   setState({ ...newState, selectedSlot });
 };

 return (
   <div>

   </div>
 );
};

To use state in functional ponents we use the so called react hooks. In your case this hook can look like this.

 const [state, setState] = React.useState({
   selectedSlot: { "0": "00", "1": "11" },
   cal: 1
 })

We use array deconstruction here. The first value is the state itself and the second value is the method we use to set the state. inside React.useState we pre-define our initial state. With setState you can mutate our current state.

To overwrite current state data we simply set the state to the allready existing property. If the property doesnt exist, a new one will be added to the state.

And ofcourse, since its a hook it has to be imported.

import React, { useState } from 'react';

For the future, make sure you understand that you're using a function ponent in this code; function ponents are meant to be stateless ponents. That is why you get the error about there being to state defined. If you plan to use states, then go with a class ponent which are used as stateful ponents. With class ponents, you can set the initial state by using a constructor that accepts "props" as an argument before your render method. To make this code work, switch this function ponent into a class ponent and define the initial state in the constructor.