React Native Arrow Down or Arrow Right When Toggle Collapse-CodePudding

I want only my selected FAQ toggle arrow right will be change to arrow down. But for now my code will change All my FAQ arrow right to down when toggle call.

This is my code :

const renderItem = ({ item }, open, show) => {         
    return (        
        <View style={styles.container}>                             
            <Collapse onToggle={() => show()}>                
                <CollapseHeader>     
                    <View style={styles.section}>
                        <Text style={styles.question}>{item.question}</Text>     
                        {open ? <AntDesign name="down" size={15} color="gray" /> : <AntDesign name="right" size={15} color="gray" />}                        
                    </View>                    
                </CollapseHeader>                                                                           
                <CollapseBody>                          
                    <Text style={styles.answer}>{item.answer}</Text>                                            
                </CollapseBody>
            </Collapse>                                   
        </View>
    );
};


const FAQComponent = () => {
    console.log('FAQComponent');    
    const [open, setOpen] = useState(false);    
    const show = () => {                           
        setOpen(!open);              
    }

    return (
        <FlatList
            data={Object.values(FAQData)}                
            renderItem={(item) => renderItem(item, open, show)}
            keyExtractor={item => item.id}                
            initialNumToRender={10}            
        />       
    );
};

This is the default layout arrow right:

And This is when one of FAQ collapse :

How do I make only selected FAQ when collapse the arrow change to down and the other remain same ?

Thank You.

CodePudding user response：

const renderItem = (item, seletecdItem, show, index) => {
  // Instead of Passing a Boolean pass a SelectedItem which holds the index of current selected index and verify it with that
  return (
    <View style={styles.container}>
      <Collapse onToggle={() => show(index)}>
        <CollapseHeader>
          <View style={styles.section}>
            <Text style={styles.question}>{item.question}</Text>
            {seletecdItem === index ? (
              <AntDesign name="down" size={15} color="gray" />
            ) : (
              <AntDesign name="right" size={15} color="gray" />
            )}
          </View>
        </CollapseHeader>
        <CollapseBody>
          <Text style={styles.answer}>{item.answer}</Text>
        </CollapseBody>
      </Collapse>
    </View>
  );
};

const FAQComponent = () => {
  console.log('FAQComponent');
  const [selectedItem, setSelectedItem] = useState(-1); // Change the useState to use number
  const show = (index) => { // Pass Index through the callback and update the state
    setSelectedItem(index);
  };

  return (
    <FlatList
      data={Object.values(FAQData)}
      renderItem={{ item,index } => renderItem(item, selectedItem, show, index)} // Pass the Index along with renderItem
      keyExtractor={item => item.id}
      initialNumToRender={10}
    />
  );
};