How to use same data in two different .js file (React Native)

Question

In the js file below we create an integer(ttSelectedItem). How do you use it on another .js file ? (Without clicking any button) Is AsyncStorage solving that problem? If it is true, how?

 import React, { Component } from 'react'; import {Platform,StyleSheet,Text,View,Image,ImageBackground} from 'react-native'; import Picker from 'react-native-wheel-picker' var PickerItem = Picker.Item; var numberList = []; var ttSelectedItem, for (let i = 0; i < 41; i++){ numberList.push(i.toString()); } export default class yks extends Component<{}> { constructor(props) { super(props); this.state = { ttSelectedItem : 20, itemList: numberList, }; } onPickerSelect (index, selectedItem) { this.setState({ [selectedItem] : index, }) } render () { return ( <View> <Picker style={{width: "100%", height: "100%"}} selectedValue={this.state.ttSelectedItem} onValueChange={(index) => this.onPickerSelect(index, 'ttSelectedItem')}> {this.state.itemList.map((value, i) => ( <PickerItem label={value} value={i} key={"money"+value}/> ))} </Picker> </View> ); } } 

Answer 1

You can create a file ttSelectedItem.js and import it in all the components you need.

Example:

//ttSelectedItem.js
const ttSelectedItem = 'Hello';

export default ttSelectedItem

//YourComponent.js
import ttSelectedItem from './path-to-ttSelectedItem';

class YourComponent extends React.Component {
  console.log(ttSelectedItem); // print Hello
}

More info: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

You can also pass down the prop from a parent component to its children.

Example:

// App.js
import FirstComponent from 'path-to-first-component';
import SecondComponent from 'path-to-second-component';

class App extends React.Component {
  render() {
    return (
      <View>
        <FirstComponent ttSelectedItem={'Hello'} />
        <SecondComponent ttSelectedItem={'Hello'} />
      </View>
    )
  }
}

// FirstComponent.js
class FirstComponent extends React.Component {
  console.log(this.props.ttSelectedItem) //print Hello
}

export default FirstComponent

// SecondComponent.js
const SecondComponent = (props) => {
  console.log(props.ttSelectedItem) //print Hello
}

export default SecondComponent

Depending on how complex your code will be, you can use HOCs to wire up some data and pass down your components

Example:

//ttSelectedItem.js
const ttSelectedItem = (Component) => {
  return <Component ttSelectedItem={'Hello'} />
}

export default ttSelectedItem;

//YourComponent.js
import ttSelectedItem from 'path-to-ttSelectedItem';

class YourComponent extends Component{
(...)
console.log(this.props.ttSelectedItem); //print Hello
(...)
}

export default ttSelectedItem(YourComponent);

More detail: https://reactjs.org/docs/higher-order-components.html

Or if you need an even complex code, you can use Redux Store to keep this data

Example using Redux and ReduxThunk:

//App.js
import ReduxThunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducer from 'path-to-your-reducer';
import YourComponent from 'path-to-your-component';

class App extends Component {

  render() {
    const store = createStore(reducer, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <YourComponent />
      </Provider>
    );
  }
}


// YourComponent.js
import { connect } from 'react-redux';

class YourComponent extends React.Component {
  console.log(this.props.ttSelectedItem) // prints Hello
}

const mapStateToProps = function(state){
  return {
    ttSelectedItem: state.ttSelectedItem,
  }
}
export default connect(mapStateToProps, {})(MainAppContainer)

// Reducer.js
const INITIAL_STATE = {
    ttSelectedItem: 'Hello',
};
export default (state = INITIAL_STATE) => {
    return state;
};

More info: https://redux.js.org/basics/store

The last example is just to show another way to handle data between components using Redux. It should be used only when dealing with really complex data sharing.

I'd suggest you to just follow the first example, it might be enough

Hope it helps