How can I sort it the way I want in the FlatList?

  javascript, node.js, react-native, reactjs

I want to sort in the order in which there are many matches between the cookup content and the ingredient in the FlatList.

My final goal is to list the items in the Card component in the order of the number of matches of content and ingredient.

Cookup and ingredient range from 1 to 10, respectively.

      cookup:
      [
        0:{content1: "1" content2: "2" content3: "3" content4: "6" content5: "7" content6: "5" content7: "empty" content8: "10" content9: "8" content10: "9" name: "second"}

        1:{content1: "1" content2: "2" content3: "3" content4: "empty" content5: "5" content6: "empty" content7: "4" content8: "empty" content9: "6" content10: "empty" name: "third"}

        2:{content1: "1" content2: "2" content3: "3" content4: "empty" content5: "4" content6: "empty" content7: "empty" content8: "empty" content9: "empty" content10: "empty" name: "four"}

        3:{content1: "8" content2: "2" content3: "3" content4: "1" content5: "4" content6: "6" content7: "7" content8: "5" content9: "9" content10: "10" name: "first"}

        4:{content1: "empty" content2: "empty" content3: "3" content4: "1" content5: "empty" content6: "2" content7: "empty" content8: "empty" content9: "empty" content10: "empty" name: "fifth"}
      ]

And ingredient has these values.

    ingredients1: 1
    ingredients2: 2
    ingredients3: 3
    ingredients4: 4
    ingredients5: 5
    ingredients6: 6
    ingredients7: 7
    ingredients8: 8
    ingredients9: 9
    ingredients10: 10

I would like to list in the card component in the order in which the content value of cookup and the ingredient value match the most.

If that happens, the names will be listed in order of first, second, third, four, fifth, right?

How do I fix the code to do that?

this is my code

(Food.js)

    const Food = ({route}) => {
      const [lastId, setLastId] = useState(30);
      const {
        ingredients1,
        ingredients2,
        ingredients3,
        ingredients4,
        ingredients5,
        ingredients6,
        ingredients7,
        ingredients8,
        ingredients9,
        ingredients10,
      } = route.params; // Receiving Value
      const {cookUp, hasMorePosts, loadPostsLoading} = useSelector(
        (state) => state.post,
      );

      console.log('cookup:', cookUp);
      return (
        <>
          <FlatList
            data={cookUp}
            keyExtractor={(item) => String(item.id)}
            renderItem={({item}) => (
              console.log('ingredients1:', ingredients1),
              console.log('ingredients2:', ingredients2),
              console.log('ingredients3:', ingredients3),
              console.log('ingredients4:', ingredients4),
              console.log('ingredients5:', ingredients5),
              console.log('ingredients6:', ingredients6),
              console.log('ingredients7:', ingredients7),
              console.log('ingredients8:', ingredients8),
              console.log('ingredients9:', ingredients9),
              console.log('ingredients10:', ingredients10),
              (
                <ImageContainer>
                  <Card
                    item={item}
                    ingredients1={ingredients1}
                    ingredients2={ingredients2}
                    ingredients3={ingredients3}
                    ingredients4={ingredients4}
                    ingredients5={ingredients5}
                    ingredients6={ingredients6}
                    ingredients7={ingredients7}
                    ingredients8={ingredients8}
                    ingredients9={ingredients9}
                    ingredients10={ingredients10}
                  />
                </ImageContainer>
              )
            )}
          />
        </>
      );
    };

    export default Food;

(Card.js)

    const Card = ({item, ingredients1,ingredients2,ingredients3,
      ingredients4,ingredients5,ingredients6,
        ingredients7,ingredients8,ingredients9,ingredients10,
      }) => {

        console.log("item:",item);
        return (
        <>
        
          </>
        );
    };

    export default Card;

Source: Ask Javascript Questions

LEAVE A COMMENT