Unable to pass props to child component in react

Question

I'm still getting to grips with react but I can't see why this isn't working, it should be passing the props from tabs into <Tab /> and outputting the button each time.

If I put no text next to {this.props.content} it doesn't display anything, if I put testText next to {this.props.content} it will output the button 5 times but only display testText not the name field it should be displaying via the content={item.name} prop

class TopCategories extends React.Component {

render() {
const Tab = () => (
  <TestBtn key={this.props.key} >
   testText {this.props.content}
  </TestBtn>
)

const items = [
  { id: 1, name: 'tab-1', text: 'text' },
  { id: 2, name: 'tab-2', text: 'text' },
  { id: 3, name: 'tab-3', text: 'text' },
  { id: 4, name: 'tab-4', text: 'text' },
  { id: 5, name: 'tab-5', text: 'text' },
]

const tabs = items.map(item =>
  <Tab key={item.id} content={item.name} />,
)

return (
  <Container>
    <Wrapper>
      {tabs}
    </Wrapper>
  </Container>
  )
 }
}


 export default TopCategories

you don't have this in Tab because it is a stateless function. props are passed as an argument instead: const Tab = (props) => /*...*/ — notgiorgi
– notgiorgi, Commented Mar 30, 2017 at 15:15
I did also try that however my linter(airbnb) throws an error when using that syntax - unexpected parenthesis around single function argument having a body with no curly braces — Thomas Harrison
– Thomas Harrison, Commented Mar 30, 2017 at 15:21

micebrain · Accepted Answer · 2017-03-30 20:32:03Z

2

You need to pass props to the stateless function and since it's a stateless component, this is not available. It should be something like:

const Tab = (props) => {
   return (
       <TestBtn key={props.key} >
           testText {props.content}
       </TestBtn>
   );
 }

edited Mar 30, 2017 at 20:32

answered Mar 30, 2017 at 15:13

micebrain

5762 silver badges9 bronze badges

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

4 Comments

Thomas Harrison Over a year ago

Thanks for the example however this throws an error in the airbnb linter which I'm not sure how to get around unexpected parenthesis around single function argument having a body with no curly brace

micebrain Over a year ago

I edited my answer, I have not use airbnb linter before, hopefully the linter is happy this style

rlemon Over a year ago

alternative would to have been to remove the () around const Tab = (props) =>

Thomas Harrison Over a year ago

it also throws an error using curly brackets ' unexpected block statement surrounding arrow body', however as suggested by rlemon it works if the parenthesis around props is removed so many thanks for that answer!

Collectives™ on Stack Overflow

Unable to pass props to child component in react

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related