FlatList doesn't render with React Hooks

Question

I am trying to rename [0]items in FlatList by clicking some item, But it doesn't work for me, when i click on each item nothing happen and i don't get any error. How can i fix this?

This is my code.

export default function renameSample() {

  const data = [
    {
      id: '1',
      name: 'test1',
    },
    {
      id: '2',
      name: 'test2',
    },
    {
      id: '3',
      name: 'test3',
    },
  ];
  
  const [stateUser, onChangeUser] = useState(data);

  return (
      <FlatList
        data={stateUser}
        renderItem={({item}) =>
          <TouchableOpacity
            onPress={() => {
              let setData = stateUser;
              setData[0].name = 'changed';
              onChangeUser(setData);
            }
            }
          >
            <Item name={item.name} />
          </TouchableOpacity>
        }
        keyExtractor={item => item.id}
      />
    </View>
  );
}

should this be stateUser or selectUser? let setData = selectUser; — Zen_Web
– Zen_Web, Commented Jul 12, 2020 at 9:35

Guruparan Giritharan · Accepted Answer · 2020-07-12 09:59:01Z

0

If your requirement is to change the clicked item, the code would be like below. You can get the index of the clicked item and change it.

function RenameSample() {
  const data = [
    {
      id: '1',
      name: 'test1',
    },
    {
      id: '2',
      name: 'test2',
    },
    {
      id: '3',
      name: 'test3',
    },
  ];

  const [stateUser, onChangeUser] = useState(data);

  return (
    <View>
      <FlatList
        data={stateUser}
        renderItem={({ item, index }) => (
          <TouchableOpacity
            onPress={() => {
             const newData=[...stateUser];
             newData[index].name = 'changed';
             onChangeUser(newData);
            }}>
            <Item name={item.name} />
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
}

edited Jul 12, 2020 at 9:59

answered Jul 12, 2020 at 9:46

Guruparan Giritharan

16.4k4 gold badges30 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Zen_Web Over a year ago

Are not you mutating a state directly here? stateUser[index].name = 'changed';

Rick Over a year ago

Thanks, it’s working!!!! I really appreciate your help.

Guruparan Giritharan Over a year ago

@Zen_Web updated the code, i wasnt sure whether thats a different item selectUser so came up with a code

Rick Over a year ago

I fixed "onChangeUser(setData);" to "onChangeUser([...setData]);", then it’s working. Thank you for everyone involved.

Collectives™ on Stack Overflow

FlatList doesn't render with React Hooks

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related