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;
    });
  }

}

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;
    });
  }

}

• javascript
• reactjs
• react-native

• Why do you want a function in the state? It would be much better to have it as a component method. – Andy Commented Mar 27, 2018 at 10:55
• so that i can update the function each time there is an update – 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 Commented Mar 27, 2018 at 10:57
• am using a listvew from react component to hold images from gallery @Rodius – Moplio Commented Mar 27, 2018 at 11:00
• Please go through react life-cycle methods(reactjs.org/docs/react-component.html) – Rohan Kangale Commented Mar 27, 2018 at 11:01

2 Answers 2

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.

Yes you can.

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