If statement within a map dictionary in react redux

Question

I have a dictionary containing objects with cards. I would only like to display each card if the current user value is equal to the stored user value. IE, if the a given user created that card.

           <CardDeck>
            {this.props.homeTdps.map(function (tdp, key) {
              if ({currentUser.username} == {this.props.tdpDetail.created_by.username})
                return (
                  <Card.Link key={key} href={`/tdps/${tdp.id}/`} style={{ minWidth: '20rem', maxWidth: '20rem' }}>
                    <Card.Body>
                      <Card.Title>{tdp.part_name}</Card.Title>
                      <Card.Text>{tdp.description}</Card.Text>
                      <Button variant="primary">Download</Button>
                    </Card.Body>
                  </Card.Link>
                );
              // }
            })}
          </CardDeck>

I am having trouble however syntatically with the the third line:

if ({currentUser.username} == {this.props.tdpDetail.created_by.username})

My current error is as follows...

Any solution is appreciated,

Thanks!

EDIT:

I have also tried removing the curly brackets from the 3rd line:

if (currentUser.username == this.props.tdpDetail.created_by.username)

I then get the error "TypeError: Cannot read property 'props' of undefined".

However, when I print the two values within a header like so, they both print just fine (and the users are the same value).

<h3>{currentUser.username}</h3> 
<h3>{this.props.tdpDetail.created_by.username}</h3>

`if (currentUser.username == this.props.tdpDetail.created_by.username)` — buzatto, Mar 03 '21 at 05:57
Change it to `if (currentUser.username == this.props.tdpDetail.created_by.username)` and try. — Yadab, Mar 03 '21 at 05:57
Hi, I've tried that. However I get the error "TypeError: Cannot read property 'props' of undefined". However, when I print the two values within a header, they both print just fine (and the users are the same value).
{currentUser.username}

{this.props.tdpDetail.created_by.username} — ehuff, Mar 03 '21 at 05:58
@EmmanuelHuff are you using a functional component or a class component? — Near, Mar 03 '21 at 06:03
@EmmanuelHuff Are you rendering the CardDeck component in the render function or are you trying to do it in a separate function? — Near, Mar 03 '21 at 06:08

score 1 · Accepted Answer · answered Mar 03 '21 at 06:09

1

remove the curly bracets from your if statement;

use arrow function at map to properly bind this to your component Class:

      {this.props.homeTdps.map((tdp, key) => {
        if (currentUser.username == this.props.tdpDetail.created_by.username)
          return (
            <Card.Link key={key} href={`/tdps/${tdp.id}/`} style={{ minWidth: '20rem', maxWidth: '20rem' }}>
              <Card.Body>
                <Card.Title>{tdp.part_name}</Card.Title>
                <Card.Text>{tdp.description}</Card.Text>
                <Button variant="primary">Download</Button>
              </Card.Body>
            </Card.Link>
          );
        // }
      })}

answered Mar 03 '21 at 06:09

buzatto

9,704
5
24
33

thank you! That did it. Do you mind explaining to me why the "=>" is needed to bind? – ehuff Mar 03 '21 at 06:12
1

you are welcome. `this` inside a function declaration like `function() {}` is not binded to its context, meanwhile an arrow function always bind the context where it's declared. https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable – buzatto Mar 03 '21 at 06:19

If statement within a map dictionary in react redux

{currentUser.username}

{this.props.tdpDetail.created_by.username}

1 Answers1