reactjs, const, passing properties

Question

I am new to react and taking over a piece of emergency work. I have a component which is invoked on the index page and I am trying to push an object property into it.

so there are two methods here of doing this

const TestBundle = ({lang}) => (
  <section className='relative-container'>
    <div className='row'>
        {lang}
    </div>
  </section>
)

TestBundle .propTypes = {
  lang: React.PropTypes.object.isRequired
}

^ this works.. but how do I get this next concept to work properly - when I tried this solution I had all sort of errors.

const TestBundle = (props) => {
    const lang = props.lang

      <section className='relative-container'>
        <div className='row'>
            {lang}
        </div>
      </section>
}

//different example

const TestBundle = (props) => {
    const lang = props.lang

      <section className='relative-container'>
        <div className='row'>
            {lang}
        </div>
      </section>
}

export default TestBundle

-- but this comes up with the error

./src/components/Services/TestBundle.js
Module build failed: SyntaxError: D:/wamp/www/project/react/src/components/Services/TestBundle.js: Unexpected token (5:2)

  3 | 
  4 | const TestBundle= (props) => {
> 5 |   const lang = props.lang
    |   ^
  6 |   
  7 |   <section className='relative-container'>
  8 |

Please demonstrate with some answers. @Felix Kling - you just propose smacking a return at the top of section? — The Old County
– The Old County, Commented May 11, 2017 at 21:53
yeah was checking on the syntax -- now what is the difference between these two methods - whats the best one to use -- why is it ok one way - the other way needs a return - you said JSX - what's the indicator of this. — The Old County
– The Old County, Commented May 11, 2017 at 21:56

Chris · Accepted Answer · 2017-05-11 21:53:00Z

5

Simple fix; you need to add a return statement for your JSX. As it stands you're not returning anything and you are mixing JSX with your constant definition:

const TestBundle = (props) => {
  const lang = props.lang;
  return (
    <section className='relative-container'>
      <div className='row'>
        {lang}
      </div>
    </section>
  );
}

Or, if you prefer a slightly shorter syntax:

const TestBundle = (props) => <section className='relative-container'>
    <div className='row'>
      {props.lang}
    </div>
  </section>

answered May 11, 2017 at 21:53

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

7 Comments

The Old County Over a year ago

now what is the difference between these two methods - whats the best one to use -- why is it ok one way - the other way needs a return - you said JSX - what's the indicator of this

Chris Over a year ago

@TheOldCounty, what do you mean? The one is shorter in syntax because rather than first declaring a constant and then using it, I use the value directly. i.e the first is like doing x=y+1 and then using x whereas the last is using y+1 directly. It's only a matter of preference. If a functional component only returns and doesn't do any logic, then you can omit the return. Otherwise you have to do like in the first example. As for what JSX is, please have a look here.

The Old County Over a year ago

I was going back to my question -- "const TestBundle = ({lang}) => (" and "const TestBundle = (props) => {"

Chris Over a year ago

@TheOldCounty That's called "deconstructing". Read more about it here.

The Old County Over a year ago

I do have another question.. about reducers and language switching

|

Collectives™ on Stack Overflow

reactjs, const, passing properties

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related