React Native, accessing a single element from an array nested in state

Question

how can I access a single element from an array nested in a state like this

state = {
    modal: false,
    post: [
      {
        key: "1",
        title: "A Good Boi",
        des: "He's a good boi and every one know it.",
        image: require("../assets/dog.jpg"),
      },
      {
        key: "2",
        title: "John Cena",
        des: "As you can see, You can't see me!",
        image: require("../assets/cena.jpg"),
      },
    ]
  };
.....
    <MyList.Provider
          value={{
           
          }}
        >
          <FlatList
            data={this.state.post}
            renderItem={({ item }) => (
              <>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => this.deleteItem(item)}
                  style={styles.Delete}
                >
                  <MaterialCommunityIcons name="delete" color="red" size={30} />
                </TouchableOpacity>
                <TouchableOpacity
                  activeOpacity={0.7}
                  onPress={() => this.props.navigation.navigate("Edit", item)}
                  style={styles.Edit}
                >
                  <MaterialCommunityIcons
                    name="playlist-edit"
                    color="green"
                    size={35}
                  />
                </TouchableOpacity>
                <Card
                  title={item.title}
                  subTitle={item.des}
                  image={item.image}
                  onPress={() =>
                    this.props.navigation.navigate("Details", item)
                  }
                />
              </>
            )}
          />
        </MyList.Provider>

how can I do this like this.state.post({title}) or some way else?? I need to use this values with context so I can share and change some particular data with between 2 screens. I know to pass data I need to use context or navigation.navigate("route name",item). But if I use navigation I won't able to edit it but how can I pass data in context value from array set, if I do this.state.post it will return whole list and if i do this.state.post[0].title it will return only title of that post. So how can i do this? Please help

Does this answer your question? [How can I access and process nested objects, arrays or JSON?](https://stackoverflow.com/questions/11922383/how-can-i-access-and-process-nested-objects-arrays-or-json) — Ken Y-N, Oct 02 '20 at 07:44
`this.state.post[0].title` to access a specific element's title. In general: https://reactjs.org/docs/lists-and-keys.html — , Oct 02 '20 at 07:49
I read about this.state.post[0].title but how can I pass key instead of 0 I'm using context.provider on flat list — Kanwarjeet Singh, Oct 02 '20 at 07:55

score 0 · Answer 1 · answered Oct 02 '20 at 07:58

0

You have to indicate the index of the object you’re trying to access in the array. For instance to access the first object in the array you can do this this.state.post[0]

answered Oct 02 '20 at 07:58

vincent O

518
8
33

i know that but instead of 0 how can I pass key of that array set so that if user click on that post it will able to edit that post – Kanwarjeet Singh Oct 02 '20 at 08:03
You’d need to do that by mapping the array or using a flatlist. If you need help with that let me know – vincent O Oct 02 '20 at 08:21
yes I need help a lot thank you, I already have flat list I will edit my question and add that see and please help – Kanwarjeet Singh Oct 02 '20 at 08:24
if i use context inside flat list i won't able to do setState – Kanwarjeet Singh Oct 02 '20 at 08:34
I have just posted a new answer – vincent O Oct 02 '20 at 09:08

vincent O · Answer 2 · 2020-10-02T09:47:45.857

below is my solution which follows the logic i think you are trying to achieve. I have used a flatlist Let me know if it helps


import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
} from 'react-native';

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false,
      post: [
        {
          key: "1",
          title: "A Good Boi",
          des: "He's a good boi and every one know it.",
          image: require("../assets/dog.jpg"),
        },
        {
          key: "2",
          title: "John Cena",
          des: "As you can see, You can't see me!",
          image: require("../assets/cena.jpg"),
        },
      ]
    };
  }

  handleEdit(item) {
    const { post } = this.state;
    const extractIndex = post.findIndex(e => e.key === item.key);
    const newPost = post[extractIndex];

    this.props.navigation.navigate('Edit', { newPost })
    this.setState({ post });
  }

  handleDelete(item) {
    const { post } = this.state;
    const newPost = post.filter(e => e.key !== item.key);
    this.setState({ post: newPost });
  }

  renderItem = ({ item }) => {
  return (
      <View>
        <Text>
          {item.title}
        </Text>
        <TouchableOpacity key={item.key} onPress={this.handleEdit.bind(this, item)}>
          <Text>Edit</Text>
        </TouchableOpacity>
        <TouchableOpacity key={item.key} onPress={this.handleDelete.bind(this, item)}>
          <Text>Delete</Text>
        </TouchableOpacity>
      </View>
    );
  }
  
  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          data={this.state.post}
          renderItem={this.renderItem}
          keyExtractor={(item, index) => index.toString()}
          extraData={this.state}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

that's great but this will work only in one screen I need to pass data to another screen which is edit screen and edit data from that screen actually its my task — Kanwarjeet Singh, Oct 02 '20 at 09:28
thank you and if I click to edit it sill direct me to edit page for that post i click edit for and how can i save that editing on edit page — Kanwarjeet Singh, Oct 02 '20 at 10:32

score 0 · Answer 3 · edited Feb 11 '22 at 07:25

0

Use .map() function Ex-

var cat_data = categories_list.map(function (item) {

var cat_data = categories_list.map(function (item) {
    return {
      name: item.Name,
      thumb_url: item.PictureModel.ImageUrl,
      cat_id: item.Id.toString(),
    };
  });
  this.setState({
    data: cat_data,      
  });

edited Feb 11 '22 at 07:25

Super Kai - Kazuya Ito

22,221
10
124
129

answered Feb 08 '22 at 09:57

Sayan Dey

173
1
8

React Native, accessing a single element from an array nested in state

3 Answers3