Unable to pass props between classes using React

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.3/react-dom.min.js"></script>

class carSelection extends React.Component {
    render(){
        return(
            <Button> {this.props.name} </Button>
        );
    }
}


class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPage: 'Your Car',
            carSelected: null
        };
    }




    renderCarsList() {
        //const carNames = ['porsche', 'Ford', 'Subaru'];
        const carName = "Porsche";
        return (
            
            //{carNames.map((carName) => <carSelection name = {carName} />)} was inside div
            <div>
                <carSelection name = {carName} />
            </div>
        );
    }



    render() {
        const menuItems = [
            "Your Car"
        ];

        return (
            <Grid centered celled padded>
                <Grid.Row>
                    <Grid.Column width={2}>
                        {menuItems.map(item => (<Button fluid>{item} </Button>))}
                    </Grid.Column>
                    <Grid.Column width={10}>
                        {this.renderCarsList()}
                    </Grid.Column>
                </Grid.Row>
          </Grid>
          );
    }
}

export default App;

I am trying to pass a prop from renderCarsList() to carSelection. Like this it builds but does not display any buttons. I have been trying to do it the same way as the react tic tac toe tutorial. I also tried with carSelection as a function but no luck.

I have not been able to do anything with this form:<carSelection name = {carName} />. When it was a function it worked using carSlection() but I cannot pass props like that.

strblr · Accepted Answer · 2019-03-07 02:26:21Z

1

Write CarSelection with capital C. Lower-case names are considered to be HTML tags.

answered Mar 7, 2019 at 2:26

strblr

99017 silver badges41 bronze badges

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

Comments

poet-CN · Accepted Answer · 2019-03-07 02:35:01Z

0

You shouldn't use camel-case naming in your class name. Try to use pascal naming instead.

eg: CarSelection

answered Mar 7, 2019 at 2:35

poet-CN

11 bronze badge

Comments

tinwan · Accepted Answer · 2019-03-07 02:44:42Z

0

Your carSelection component should capitalize the first letter。React will recognize the component with Capital lowercase to be native html element.

answered Mar 7, 2019 at 2:44

tinwan

3071 silver badge4 bronze badges

Collectives™ on Stack Overflow

Unable to pass props between classes using React

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related