Блог

Я использую модальный, но есть проблема, используя модальный, я получил все name из About , но без него я получил только ОДНО значение. Мне нужно принять только ОДНО значение с помощью Modal

 import React, { Component } from "react";
import { Text, View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false
  };

  renderMap() {
    const About = [
      {
        name: "Gabe",
        msg: "Hello",
        img: "Some Img"
      },
      {
        name: "Amanda",
        msg: "Hi",
        img: "Another img"
      },
      {
        name: "Cauã",
        msg: "Whats up ",
        img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180, backgroundColor: "red", marginTop: 10 }}>
          <Text
            onPress={() => {
             // console.log(info.name); 
            // delete the MODAL and try out this only with the console.log
              this.setState({
                visible: true
              });
            }}
          >
            Click on the Title
          </Text> 

          <Modal isVisible={this.state.visible}>{console.log(info.name)}</Modal>

        </View>
      );
    });

    return Choose;
  }

  render() {
    return <View>{this.renderMap()}</View>;
  }
}
  

Смотрите полный проект

Вы видели? Без модального я получил точное значение в console.log(), но с модальным я получил ТРИ значения. Мне нужно что-то, что получило значение с помощью Modal

Хороший способ

 import React, { Component } from "react";
import { Text, View } from "react-native";
import Modal from "react-native-modal";

export default class App extends Component {
  state = {
    visible: false,
    userInfos: null
  };

renderMap() {
    const About = [
      {
        name: "Gabe",
        msg: "Hello",
        img: "Some Img"
      },
      {
        name: "Amanda",
        msg: "Hi",
        img: "Another img"
      },
      {
        name: "Cauã",
        msg: "Whats up ",
        img: "Another img"
      }
    ];

    const Choose = About.map((info) => {
      return (
        <View style={{ width: 180, backgroundColor: "red", marginTop: 10 }}>
          <Text
            onPress={() => {
              this.setState({
                visible: true,
                userInfos: info
              });
            }}
          >
            Click on the Title
          </Text> 
        </View>
      );
    });

    return Choose;
  }

  render() {
    return(
        <View>
            {this.renderMap()}
            <Modal isVisible={this.state.visible}>
                <Text>{this.state.userInfos.name}</Text>
            </Modal>
        </View>
    )
  }
}