Search code examples
javascriptreactjsecmascript-6semantic-ui

How to user null in map React JS

I am making an application in React JS. It consists of list of the user for which book is available, taken or requested, but when the book is filtered from the store based on user the line of the invalid user still arrives.

return (
    <div>
      <h1>List of Books</h1>
      {filterValues.map((books) => (
        <Segment.Group key={books.id}>
          {(books.name === user!.username || books.name === null) &&
          (books.requestedBy === user!.username ||
            books.requestedBy === null) ? (
            <Segment>
              <Item.Group>
                <Item>
                  {console.log(books)}
                  <Item.Image size="tiny" circular src="/assets/books.jpg" />
                  <Item.Content>
                    <Item.Header as="a">{books.bookName}</Item.Header>
                    <Item.Description>
                      {books.isRequested ? (
                        <Button
                          name={books.bookName}
                          loading={target === books.bookName && submitting}
                          onClick={(e) => onRequestClick(e, "cancel", books.id)}
                          color="red"
                          type="button"
                          content="Cancel Request"
                        />
                      ) : books.isTaken ? (
                        <div>
                          <Label basic color="red">
                            This book is taken By you
                          </Label>
                          <Button
                            name={`return${books.bookName}`}
                            loading={
                              target === "return" + books.bookName && submitting
                            }
                            color="brown"
                            onClick={(e) => returnBook(e, books.id)}
                            type="button"
                            content="Return this Book"
                          />
                        </div>
                      ) : (
                        <Button
                          name={books.bookName}
                          loading={target === books.bookName && submitting}
                          onClick={(e) =>
                            onRequestClick(e, "request", books.id)
                          }
                          color="green"
                          type="button"
                          content="Request For Book"
                        />
                      )}
                    </Item.Description>
                  </Item.Content>
                </Item>
              </Item.Group>
            </Segment>
          ) : null}
        </Segment.Group>
      ))}

      <Segment clearing></Segment>
    </div>
  );

For example for the list of books i filtered 5 books in map and UI is something like :

enter image description here

How Can i remove those line

Solution

  • Your filtering logic is placed within the .map prototype method itself, so when you are returning null, it's still placed within an empty <Segment.Group> element. Therefore I guess that this element provides the styles which result in rendering those lines.

    If you want to truly filter the results and omit any returns for the ones that do not match, it would be best to first call .filter() on your array and omit the null values returned by map:

    
{
    filterValues
        .filter(books =>
            (books.name === user!.username || books.name === null)
            && (books.requestedBy === user!.username || books.requestedBy === null)
        ).map(books =>
                <Segment.Group  key={books.id}>
                    // Segment items here without the conditional rendering of elements
                </Segment.Group>
        )
}