I am new to react and taking over a piece of emergency work. I have a ponent 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 es up with the error

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

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

I am new to react and taking over a piece of emergency work. I have a ponent 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 es up with the error

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

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

• javascript
• reactjs

• You can't put JSX in a middle of a block! – Andrew Li Commented May 11, 2017 at 21:50
• 1 return <section ....; – Felix Kling Commented May 11, 2017 at 21:51
• Please demonstrate with some answers. @Felix Kling - you just propose smacking a return at the top of section? – The Old County Commented May 11, 2017 at 21:53
• Yes. The function needs to return something. – Felix Kling Commented May 11, 2017 at 21:54
• 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 Commented May 11, 2017 at 21:56

1 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>