Can this class be changed into a React stateless function?

Question

I am trying to change a react class into a stateless function but encounter some errors. Can you please help? The class is rendering a list in table format.

I first tried:

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key=lease._links.self.href
                                   lease=lease
                                   attributes=props.attributes
                                   handleDelete=props.handleDelete
                                   handleUpdate=props.handleUpdate/>
                        );
                 }
             </tbody>
         </Table>
    );
}

But got error:

JSX value should be either an expression or a quoted JSX text (345:39)

  343 |                         <div>Is Loading...</div> :
  344 |                         props.leases.map(lease =>
> 345 |                             <Lease key=lease._links.self.href
      |                                        ^
  346 |                                    lease=lease
  347 |                                    attributes=props.attributes
  348 |                                    handleDelete=props.handleDelete

Then I tried to place brackets around leases like this:

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key={lease._links.self.href}
                                   lease={lease}
                                   attributes={props.attributes}
                                   handleDelete={props.handleDelete}
                                   handleUpdate={props.handleUpdate}/>
                        );
                 }
             </tbody>
         </Table>
    );
}

But got error:

Unexpected token, expected } (350:25)

  348 |                                    handleDelete={props.handleDelete}
  349 |                                    handleUpdate={props.handleUpdate}/>
> 350 |                         );
      |                          ^
  351 |                  }
  352 |              </tbody>
  353 |          </Table>

Update 1: Remove ; from );

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                         props.leases.map(lease =>
                            <Lease key=lease._links.self.href
                                   lease=lease
                                   attributes=props.attributes
                                   handleDelete=props.handleDelete
                                   handleUpdate=props.handleUpdate/>
                        )
                 }
             </tbody>
         </Table>
    );
}

Still failing with same error:

JSX value should be either an expression or a quoted JSX text (345:39)

  343 |                         <div>Is Loading...</div> :
  344 |                          props.leases.map(lease =>
> 345 |                             <Lease key=lease._links.self.href
      |                                        ^
  346 |                                    lease=lease
  347 |                                    attributes=props.attributes
  348 |                                    handleDelete=props.handleDelete

Answer 1

Try removing ; from line 345. There is no reason for this to be there. Also don't forget to use {} around the props.

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        props.leases.map(lease =>
                            <Lease key={lease._links.self.href}
                                   lease={lease}
                                   attributes={props.attributes}
                                   handleDelete={props.handleDelete}
                                   handleUpdate={props.handleUpdate}/>
                        )
                 }
             </tbody>
         </Table>
    );
}

Answer 2

You forgot some curly braces line 345:

function LeaseList(props) {
    return (
         <Table hover bordered striped responsive>
             <tbody>
                 {
                     props.isLoading ?
                        <div>Is Loading...</div> :
                        {props.leases.map(lease =>
                            <Lease key=lease._links.self.href
                                   lease=lease
                                   attributes=props.attributes
                                   handleDelete=props.handleDelete
                                   handleUpdate=props.handleUpdate/>
                        )}
                 }
             </tbody>
         </Table>
    );
}