CODEWITHSUNDEEP
react-native
user9172879
user9172879

Reputation:

Change view content on button click

I want to make a screen where I have two buttons on top, like steps: So it's 

Data1   Data2

some static text 

(if Data1 active-clicked)

 data 1 field
 data 1 field

 If Data2 clicked:

  Data 2 field

   Data 2 field

So it's only the fields that change.

I have this form :

 <View>
 <Text> Static text </Text>
  </View>
 <Form style={styles.form}>
        <Label style={styles.label}>
          data 1
        </Label>
        <Item >
          <Input
            value={this.state.data2}
          />
        </Item>
        <Label style={styles.label}>
          Data2
        </Label>
        <Item>
          <Input
            value={this.state.data2}
          />
        </Item>
      </Form>

        <Button
        onPress={this.SubmittedData.bind(this)}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Submit</Text>
      </Button>

So it's the form part that needs to be changed back and forth. How does this logic/structure work in react native ? I've only used angular before and I'm starting to learn react. I'm mainly trying to understand how the states are managed. Any guidance or example? Thanks.

Upvotes: 1

Views: 3630

Answers (1)

Hazim Ali
Hazim Ali

Reputation: 1095

basically I suggest you to use navigation library but for me I prefer React-Navigation. (https://reactnavigation.org/) they have the tabNavigator which you can implement two button and assign the content based on each Route Component..

basically like :-

const MyApp = TabNavigator({
  Data1: { screen: Data1 },
  Data2: { screen: Data2 }
});

class Data1 extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Data 1'
  };

  render() {
    return (
      <Text>Data inside Data 1</Text>
    );
  }
}

class Data2 extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Data 2'
  };

  render() {
    return (
      <View>
        <Text>Data inside Data 2</Text>
      </View>
    );
  }
}

or if you feel want to experiment mutating the state.. you can use normal if or es6 if condition to render which component you like..

It can look something like this :

class Data extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: null
    }
  }
  
  data1 = () => {
    return (
      <View>
        <Text>This is data 1</Text>
        <Text>I Have something in data 1</Text>
      </View>
    )
  }
  
  data2 = () => {
    return (
      <View>
        <Text>This is data 2</Text>
        <Text>I Have something in data 2</Text>
      </View>
    )
  }
  
  changeData = (data) => {
    this.setState({ selected: data });
  }

  render() {
    return (
      <View>
        <View style={{ flexDirection: 'row' }}>
          <TouchableHighlight onPress={()=>this.changeData('1')}>
            <Text>Data 1</Text>
          </TouchableHighlight>
          <TouchableHighlight onPress={()=>this.changeData('2')}>
            <Text>Data 2</Text>
          </TouchableHighlight>
        </View>
        
        {this.state.selected === '1' ? data1 : data2}
        
      </View>
    );
  }
}

Hope this will help you know a lil bit how to mutate the data in react and sorry if my explanation not really understandable..

Upvotes: 2

Related Questions