react got error of unknown props

Question

I want to try stateless component in react, I split them into 2, but I got error of Warning: Unknown propsitemson <renderItems> tag

What's wrong with my code below?

import Items from './Items'
import Infinite from 'react-infinite'

const LeftPanel = (props) => {
    return(
        <div className="leftPanel">
            <renderItems {...props} />
        </div>
    )
}

const renderItems = (props) => (
    <Infinite containerHeight={200} elementHeight={118}>
        {map(props.items, (item, index) => (
            <Items 
                index={index}
                item={item} 
            />
        ))}
    </Infinite>
)

export default LeftPanel

Possible duplicate of [Html is not rendering in the browser - React js](https://stackoverflow.com/questions/42110144/html-is-not-rendering-in-the-browser-react-js) use `RenderItems` instead of `renderItems`. — Mayank Shukla, Jul 03 '17 at 07:16

score 1 · Answer 1 · edited Jul 03 '17 at 07:19

1

I think you should rename your renderItems to RenderItems. I was seeing this and it looks like in JSX you need to put capital letter on the first word of your component name:

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)

edited Jul 03 '17 at 07:19

Mayank Shukla

100,735
18
158
142

answered Jul 03 '17 at 07:04

samAlvin

1,648
1
11
35

instead of copy and pasting answer, mark the answer as duplicate :) – Mayank Shukla Jul 03 '17 at 07:07
@MayankShukla ah I see, thanks for the insight. But what if the OP doesn't know that the cause is the letter case? Since in the link of the source answer, the title of the question is "ReactJS component names must begin with capital letters?" (the OP there seems to know the cause), while here the OP doesn't know the cause. Shouldn't we put some answer for the cause? or should we just mark it as duplicate? – samAlvin Jul 03 '17 at 07:13
1

mention that in comment, *instead of `abc` use `Abc` check this answer for more details*, because that answer explained the issue very well :) – Mayank Shukla Jul 03 '17 at 07:18

Henrik Andersson · Answer 2 · 2017-07-03T07:06:51.767

0

There's a syntactic error in your code. You're using parenthesis in your functional component instead of curly braces.

const renderItems = (props) => {
    return (<Infinite containerHeight={200} elementHeight={118}>
        {map(props.items, (item, index) => (
            <Items 
                index={index}
                item={item} 
            />
        ))}
    </Infinite>);
}

Furthermore, lowercase component names are now deprecated so renderItems should be called RenderItems.

edited Jul 03 '17 at 07:06

answered Jul 03 '17 at 07:05

Henrik Andersson

45,354
16
98
92

OP's code is correct, this will throw error, you are not returning anything inside `{}`. – Mayank Shukla Jul 03 '17 at 07:06

react got error of unknown props

2 Answers2