Reputation: 13

Unable to pass props between classes using React

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

Upvotes: 0