CODEWITHSUNDEEP
reactjscomponentsrender
user3622460
user3622460

Reputation: 1251

Component not rendering out buttons

I'm trying to render out a few buttons, but for some reason nothing is happening. I'm not certain where my mistake is. I have an OverviewRender class which will eventually handle different sets of buttons to render and an Overview class which calls OverviewRender to render out the buttons.

It feels like should be working, but the buttons aren't rendering. If I move the buttons inside the Overview return function I see can see them.

import React, { Component } from 'react'
import SearchBar from 'material-ui-search-bar'
import sass from '../scss/application.scss'
import PropTypes from 'prop-types'
import RaisedButton from 'material-ui/RaisedButton'


class OverviewRender extends Component {
    render() {
        const mainMenu = () => {
            return (
                <div>
                    <RaisedButton label="File Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                    <RaisedButton label="Setup Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            />
                    <RaisedButton label="More Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                </div>
            )
        }       
        return (
            <div>
                {mainMenu}
            </div>
        )
    }
}


class Overview extends Component {
    constructor(props){
            super(props)
                this.state = {
                    open: false
                }
            }

    render() {
        return (
            <div className="menuButtons">
                <OverviewRender />
            </div>
        )
    }
}

export default Overview;

Upvotes: 0

Views: 43

Answers (2)

btzr
btzr

Reputation: 2154

User-Defined Components Must Be Capitalized

We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

Just rename mainMenu to MainMenu an it should work.

See the docs: component must be capitalized

class OverviewRender extends React.Component {
    render() {
        const MainMenu =  ({name}) => (
                <div>
                    <button label="File Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                    <button label="Setup Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            />
                    <button label="More Options" 
                        style={{ 
                            height: '80px',
                            width: '180px',
                            fontSize: '44px',
                            padding: '1px'}}
                            /> 
                </div>
        );

        return (
            <div>
                <MainMenu/>
            </div>
        )
    }
}

ReactDOM.render( < OverviewRender / > , document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Upvotes: 0

Chase DeAnda
Chase DeAnda

Reputation: 16441

It's because you have created a function mainMenu that creates your buttons, but you never call it.

Two options:

1. Move the mainMenu return contents directly into the div:

class OverviewRender extends Component {
    render() {     
        return (
            <div>
                <RaisedButton 
                    label="File Options"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="Setup Options"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
                <RaisedButton 
                    label="More Options"
                    style={{
                        height: '80px',
                        width: '180px',
                        fontSize: '44px',
                        padding: '1px'
                    }}
                />
            </div>
        )
    }
}

2. Move mainMenu out of the component to make it a functional component, which looks like what you are trying to achieve. And then you have to use it like you would any other component: <MainMenu />:

class OverviewRender extends Component {
    render() {     
        return <MainMenu />
    }
}

const MainMenu = () => (
    <div>
        <RaisedButton 
            label="File Options"
            style={{
                height: '80px',
                width: '180px',
                fontSize: '44px',
                padding: '1px'
            }}
        />
        <RaisedButton 
            label="Setup Options"
            style={{
                height: '80px',
                width: '180px',
                fontSize: '44px',
                padding: '1px'
            }}
        />
        <RaisedButton 
            label="More Options"
            style={{
                height: '80px',
                width: '180px',
                fontSize: '44px',
                padding: '1px'
            }}
        />
    </div>
);

Upvotes: 2

Related Questions