Jsx Component not showing after conditional checks

The problem is I have two redux stores

  1. items(Items Store
  2. quotationItems(Quote Items.

When a product item is added to quotationItems I Would to show <RedButton title="Remove" /> or when the quotationItems is empty the <AddButton title="Add" /> should be shown.

using if statement tends to re-render the component and adds new components e.g: After adding a new product to quotation items, there will be a new <AddButton /> in FlatList Component.

interface IProps {
  items: ItemInterface[];
  documentItems: ItemInterface[];
  onAddItem: any;
}

const ItemFlatList2: FC<Partial<IProps>> = ({
  items,
  documentItems,
  onAddItem,
}) => {
  const TestView = (itemCode) => {
    documentItems.map((x) => {});
  };
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.itemCode.toString()}
      renderItem={({
        item: { itemCode, itemDescription, itemSellingPrice },
      }) => {
        return (
          <div className={styles.itemContainer}>
            <h4>Item Code: {itemCode}</h4>
            <h4>Description: {itemDescription}</h4>
            <div>
              {documentItems.map((x) => {
                x.itemCode === itemCode ? (
                  <RedButton title={"Remove"} key={itemCode} />
                ) : (
                  <AddButton title={"Add"} key={itemCode} />
                );
              })}
            </div>
          </div>
        );
      }}
    />
  );
};

Other options I've tried:

I've also tried this, still doesn't work, the buttons will show up but after clicking on the first button, which will successful add the product item to quotation item store but when I try and click on the 2nd or 3rd button of `<AddButton title={'Add'} key={itemCode} /> I get no response.

            <div>
              {documentItems.length <= 0 ? (
                <AddButton
                  title={"Add"}
                  key={itemCode}
                  onClick={() => onAddItem(itemCode)}
                />
              ) : (
                documentItems!.map((x) =>
                  x.itemCode === itemCode ? (
                    <RedButton title={"Remove"} key={itemCode} />
                  ) : (
                    <
AddButton title={"Add"} key={itemCode} onClick={() => onAddItem(itemCode)} />
                  )
                )
              )}
            </div>

This is the result of the modified code above: Result of Modified Code



Read more here: https://stackoverflow.com/questions/68449636/jsx-component-not-showing-after-conditional-checks

Content Attribution

This content was originally published by Tony Ngomana at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: