Can i have a function inside a state in react?

Question

I'm trying to create variables and a function inside a state like this

     state = {
          modalVisible: false,
          photo:""
          getDataSourceState
    }

which i have done, how can i call the function outside the state and set a new state.

This what i have done but i keep getting errors

    getDataSourceState() {
        return {
          dataSource: this.ds.cloneWithRows(this.images),
        };
      }



    this.setState(this.getDataSourceState());

see what prompted me to ask the question, because i was finding it difficult to access modalVisible in the state since there is a this.state = this.getDataSource()

constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      photo:"",
      sourceState: getDataSourceState()
    }
    this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.lastPhotoFetched = undefined;
    this.images = [];
    this.fetchPhotos();
    this.getDataSourceState = this.getDataSourceState.bind(this)
  }

componentDidMount(){
  this.getDataSourceState();
}

  getDataSourceState() {
    return {
      dataSource: this.ds.cloneWithRows(this.images),
    };
  }

  getPhotosFromCameraRollData(data) {
    return data.edges.map((asset) => {
      return asset.node.image;
    });
  }

}

Why do you want a function in the state? It would be much better to have it as a component method. — Andy
– Andy, Commented Mar 27, 2018 at 10:55
so that i can update the function each time there is an update — Moplio
– Moplio, Commented Mar 27, 2018 at 10:57
Not sure if you can but I can't imagine why would you want that. A state is local to the component so why not just call the function defined inside it. @D.Moplio What do you want to update from the function? — Rodius
– Rodius, Commented Mar 27, 2018 at 10:57
am using a listvew from react component to hold images from gallery @Rodius — Moplio
– Moplio, Commented Mar 27, 2018 at 11:00
Please go through react life-cycle methods(reactjs.org/docs/react-component.html) — Rohan Kangale
– Rohan Kangale, Commented Mar 27, 2018 at 11:01

Stretch0 · Accepted Answer · 2020-07-29 14:30:19Z

9

You can't the way you have attempted but technically yes, you can have a function that returns the desired state you want initialised in your constructor. I wouldn't suggest doing it though.

You will quickly run into issues where your components aren't updating state correctly.

What you are looking for is a function that returns a value as opposed to sets state. You would do something like this:

constructor(){
  super()

  this.state = {
    modalVisible: false,
    photo:""
    sourceState: this.getDataSourceState()
  }

  this.getDataSourceState = this.getDataSourceState.bind(this)
}

getDataSourceState(){
  return this.ds.cloneWithRows(this.images)
}

As I mentioned, it is not a good idea to do it this way. You are better off initialising the state values as a default value and then setting the state in your componentDidMount like so:

constructor(){
    super()

    this.state = {
        modalVisible: false,
        photo:""
        sourceState: null
    }

    this.getDataSourceState = this.getDataSourceState.bind(this)
}


componentDidMount(){
    this.getDataSourceState()
}

getDataSourceState(){

    const data = this.ds.cloneWithRows(this.images)

    this.setState({soureState: data})
    
}

This way you have a reusable function which you can call in componentDidUpdate() if need be for when you move navigate between the same component with different data and want the state to update.

edited Jul 29, 2020 at 14:30

answered Mar 27, 2018 at 10:59

Stretch0

9,40215 gold badges95 silver badges162 bronze badges

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

7 Comments

user2473779 Over a year ago

the first example should have something like getDataSourceState.bind(this)

Moplio Over a year ago

@Stretch0 see what prompted me to inside getDataSourceState() inside the state. constructor(props) { super(props); state = { modalVisible: false, photo:"", } this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.lastPhotoFetched = undefined; this.images = []; this.state = this.getDataSourceState(); this.fetchPhotos(); }

Stretch0 Over a year ago

@D.Moplio I'm not sure what you're trying to say there. Might help to move the code into your original post as and edit

Moplio Over a year ago

@Stretch0 just did that

Stretch0 Over a year ago

@D.Moplio I'm still confused what you are trying to do. You are trying to set state in your constructor with state = {}. You need to use this.state = {}. You are overriding your state when you call this.state = this.getDataSourceState();. Very confussing

|

Taazar · Accepted Answer · 2019-11-20 09:59:55Z

2

Yes you can.

class App extends Component {
    func1 = () => {
        this.setState({flag:!this.state.flag})
    }
   state = {
       flag:true,       
       doclick:this.func1
    }
}

edited Nov 20, 2019 at 9:59

Taazar

1,50318 silver badges27 bronze badges

answered Nov 20, 2019 at 9:19

Vishal Pratap

1313 bronze badges

Collectives™ on Stack Overflow

Can i have a function inside a state in react?

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related