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 |     

Answer 1

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>