CODEWITHSUNDEEP
reactjsreact-native
Wilfredo Casas
Wilfredo Casas

Reputation: 489

How to render a component using onPress()?

I'd like to render / navigate to a new component passing props to it once I click on a button.

First attempt - syntax is wrong

{
  this.state.history ? (
    this.state.history.map(data => {
      return (
        <View style={styles.historyUnit}>
          <TouchableOpacity
          onPress={return <Map2 latitude={data1} longitude={data1} />;}
          >
            {" "}
          </TouchableOpacity>
        </View>
      );
    })
  ) : (
    <ActivityIndicator size="large" color="#0000ff" />
  );
}

Second attempt - component is not rendered

onPress={this.showHistory}

  showHistoryUnit = (data1, data2) => {
    return <Map2 latitude={data1} longitude={data1} />;
  };

Third attempt - I navigate to the component, but props are not passed

  showHistoryUnit = (data1, data2) => {
    this.props.navigation("map2")
    return <Map2 latitude={data1} longitude={data1} />;
  };

How can I make this happen?

Upvotes: 0

Views: 672

Answers (3)

Vipin Kumar
Vipin Kumar

Reputation: 131

you can use a ternary operator with setState Like when you onPress in a button set some state and then use ternary operator to show the view check your this.state.history ideally, it should be a boolean.

Upvotes: 0

Zhlayzoon
Zhlayzoon

Reputation: 61

this.state = {
    selectedId = 0
}

this.state.history.map(data => {
    return (
        <View style={styles.historyUnit}>
            <TouchableOpacity
                onPress={() => {
                    this.setState({ selectedId: data.id })
                }}
            >
                {data.id === this.state.selectedId &&
                    <Map2 latitude={data1} longitude={data1} />
                }
            </TouchableOpacity>
        </View>
    );
})

it just returns a Map2 component in the same time. if you want return Map2 in a row use array instead

Upvotes: 2

Umair Sarfraz
Umair Sarfraz

Reputation: 5953

Ideally, you should use a modal or similar for displaying specific Map information but this can also be achieved using component internal state.

state = {
    mapComponent: null,
};

if (this.state.history) {
    return this.state.mapComponent || this.state.history.map(data => {
        return (
            <View style={styles.historyUnit}>
                <TouchableOpacity
                    onPress={() => this.setState({ mapComponent: <Map2 latitude={data1} longitude={data1} /> })}
                >
                    {" "}
                </TouchableOpacity>
            </View >
        );
    })
}

return <ActivityIndicator size="large" color="#0000ff" />;

Upvotes: 1

Related Questions