React typescript Parsing error: '{' expected

Question

i'm using react + typescript and get this error. Parsing error: '{' expected how to fix it?.

here is my code snippet

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            });
          }
        </Container>
      </div>
    );
  }

Remove the semi colon after the closing parenthesis for this.collection.items.map(... — George
– George, Commented Feb 24, 2020 at 9:45

basarat · Accepted Answer · 2020-02-24 09:49:30Z

4

Parsing error: '{' expected

You need to wrap the attribute in {

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
            <Card>
              <Card.Image>
                <Image.Container size='3by4'>
                  <Image src={collection.coverLink} /> {/*fix here*/}
                </Image.Container>
              </Card.Image>
            </Card>
          })} {/*another fix here*/}
      </Container>
      </div>
    );
  }

Also removed the semicolon ;).

answered Feb 24, 2020 at 9:49

basarat

278k60 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jay · Accepted Answer · 2020-02-24 09:45:57Z

0

Please remove ;

  render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            }); // Remove ;
          }
        </Container>
      </div>
    );
  }

answered Feb 24, 2020 at 9:45

Jay

3,1392 gold badges16 silver badges31 bronze badges

Comments

Ondrej Husár · Accepted Answer · 2020-02-24 09:56:55Z

Firstly, you need to add {} around the prop to Image component, like this: <Image src={collection.coverLink} />.

Sencondy, you are not returning anything from the function in map.

WRONG:

{this.collection.items.map(collection => {
    <Card>
      <Card.Image>
        <Image.Container size='3by4'>
          <Image src={collection.coverLink} />
        </Image.Container>
      </Card.Image>
    </Card>
  });
}

GOOD:

{this.collection.items.map(collection => (
    <Card>
      <Card.Image>
        <Image.Container size='3by4'>
          <Image src={collection.coverLink} />
        </Image.Container>
      </Card.Image>
    </Card>
  ));
}

OR:

{this.collection.items.map(collection => {
    return (
      <Card>
        <Card.Image>
          <Image.Container size='3by4'>
            <Image src={collection.coverLink} />
          </Image.Container>
        </Card.Image>
      </Card>
    );
  });
}

yassine ennaim · Accepted Answer · 2020-02-24 10:28:44Z

Try to change {} by ()

render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => (
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
            ))
          }
        </Container>
      </div>
    );
  }

Or make Card inside return()

render() {
    console.log(this.state.collection);
    return (
      <div className='body-container'>
        <Container>
          {this.collection.items.map(collection => {
              return(
              <Card>
                <Card.Image>
                  <Image.Container size='3by4'>
                    <Image src=collection.coverLink />
                  </Image.Container>
                </Card.Image>
              </Card>
              )
            })
          }
        </Container>
      </div>
    );
  }

joy08 · Accepted Answer · 2020-02-24 10:33:11Z

0

You missed flower brackets , add the following

Use it to wrap the value of "src" attribute

 <Image src={collection.coverLink} />

answered Feb 24, 2020 at 10:33

joy08

9,6729 gold badges43 silver badges81 bronze badges

Collectives™ on Stack Overflow

React typescript Parsing error: '{' expected

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related