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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

You missed flower brackets , add the following

Use it to wrap the value of "src" attribute

 <Image src={collection.coverLink} />