[![enter image description here](https://i.stack.imgur.com/bw6g9.png)](https://i.stack.imgur.com/bw6g9.png)

I have a touchableopacity on each card where I want to setstate of expand to true, but I want to do it according to the id, so that state of only one changes, any idea how to do it using map()?

My code:

```
import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import axios from 'axios';
import {ROOT} from '../../../../ApiUrl';

import Icon from 'react-native-vector-icons/FontAwesome';
export default function VaccinationListScreen(props) {
  const [expand, setExpand] = useState(false);
  const [data, setData] = useState('');

  let id = props.route.params.id;
  const getData = () => {

    let url = `some url`;
    console.log('bbb');

    axios
      .get(url)
      .then(function (res) {
        console.log(res.data.content);
        setData(res.data.content);
      })
      .catch(function (err) {
        console.log(err);
      });
  };
  useEffect(() => {
    getData();
  }, []);
  return (
    <SafeAreaView>
      <ScrollView>

        <TouchableOpacity style={{padding: 10}} onPress={()=>setExpand(true)}>
          {data != undefined &&
            data != null &&
            data.map((item) => {
              return (
                <View
                  style={{
                    padding: 10,
                    backgroundColor: '#fff',
                    elevation: 3,
                    margin: '2%',
                    borderRadius: 5,
                  }}
                  key={item.id}>
                  <View style={{alignItems: 'flex-end'}}>
                    <Text style={{color: 'grey', fontSize: 12}}>
                      {item.display_date}
                    </Text>
                  </View>
                  <View style={{flexDirection: 'row'}}>
                    <View>
                      <Image
                        source={require('../../assets/atbirth.jpg')}
                        style={{height: 40, width: 50}}
                        resizeMode="contain"
                      />
                    </View>
                    <View style={{flex: 1}}>
                      <View style={{flexDirection: 'row', flex: 1}}>
                        <Text
                          key={item.id}
                          style={{
                            fontFamily: 'Roboto',
                            fontSize: 18,
                            fontWeight: 'bold',
                          }}>
                          {item.name}
                        </Text>
                      </View>
                      <View style={{flexDirection: 'row', width: '30%'}}>
                        {item.vaccine_list.map((i) => {
                          return (
                            <View style={{flexDirection: 'row'}}>
                              <Text
                                numberOfLines={1}
                                ellipsizeMode="tail"
                                style={{fontFamily: 'Roboto', fontSize: 15}}>
                                {i.name},
                              </Text>
                            </View>
                          );
                        })}
                      </View>
                    </View>
                  </View>
                  <View style={{alignItems: 'flex-end', marginTop: '1%'}}>
                    <View style={{flexDirection: 'row'}}>
                      <Text
                        style={{
                          color: 'red',
                          fontSize: 14,
                          fontWeight: 'bold',
                        }}>
                        {item.child_vacc_status.text}
                      </Text>
                      <Icon
                        name="chevron-up"
                        color="red"
                        size={12}
                        style={{marginTop: '1%', marginLeft: '1%'}}
                      />
                    </View>
                  </View>
                </View>
              );
            })}
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

```

Any suggestions would be great, do let mw know if anything else is required for better understanding