How to get javascript to work in React component

Question

So I don't seem to be able to get my inner most javascript to compile in the render() of one of my component classes. Do I have my syntax wrong or are we not allowed to have Javascript in the render() return HTML with more Javascript inside?

My error is SearchBarAndResults.jsx: Unexpected token (57:12)

  render() {
    let recievedContracts = this.props.passedContracts.recievedContracts;
    if (!recievedContracts) {
      return (
        <div>
          <h3>'Still waiting for JSON Response'</h3>
        </div>
      );
    } else {       
      const allMemberContractsInfo = this.props.passedContracts.allMemberContractsInfo;
      return (
        <div>
          <h3>'allMemberContractsInfo Have Arrived on the Client Side!'</h3>

          <Button>
            <a href='http://www.adnxs.net/' target="_blank">New Bidder</a>
          </Button>

          {
            if (2 === (3 -1)) { // <============= line 57
              return (<h1>1 does equal 1</h1>);
            } else {
              return (<h1>1 does not equal 1</h1>);
            }
          }
          // other code...

JMM · Accepted Answer · 2016-04-23 03:49:47Z

1

You can only embed expressions within JSX, not statements (like if).

You can do one of these:

{
  2 === (3 - 1) ?
  <h1>1 does equal 1</h1> :
  <h1>1 does not equal 1</h1>
}

{function () {
  if (2 === (3 - 1)) {
    return (<h1>1 does equal 1</h1>);
  } else {
    return (<h1>1 does not equal 1</h1>);
  }
}()}

answered Apr 23, 2016 at 3:49

JMM

26.9k3 gold badges54 silver badges56 bronze badges

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

Comments

Horo · Accepted Answer · 2016-04-23 03:56:01Z

0

You should to rewrite statement as an expression for use it in JSX.

{
  2 === (3 -1)
  ? <h1>1 does equal 1</h1>
  : <h1>1 does not equal 1</h1>;
}

answered Apr 23, 2016 at 3:56

Horo

1021 silver badge10 bronze badges

Collectives™ on Stack Overflow

How to get javascript to work in React component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related