1

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>
    );
  }
1
  • Remove the semi colon after the closing parenthesis for this.collection.items.map(... Commented Feb 24, 2020 at 9:45

5 Answers 5

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 ;).

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

Comments

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>
    );
  }

Comments

0

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>
    );
  });
}

Comments

0

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>
    );
  }

Comments

0

You missed flower brackets , add the following

Use it to wrap the value of "src" attribute

 <Image src={collection.coverLink} />

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.