CODEWITHSUNDEEP
reactjsredux
yobaxeb
yobaxeb

Reputation: 117

Element is not rendering in react

In my file called app.jsx i have one import from the component "atividades":

import React from 'react'

import { Container } from 'semantic-ui-react'
import atividades from '../atividades/atividades'

export default props => (
    <Container>
        <h1>Teste</h1> 

        <atividades />

    </Container>
)

But only the h1 is rendering...

This is my atividades component: 

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'

import { Form } from 'semantic-ui-react'
import { addWorkout, searchWorkout } from './workOutActions'
import { Button, Icon } from 'semantic-ui-react'

const workoutOptions = [
    { text: 'correr', value: 'run' },
    { text: 'nadar', value: 'swimming' },
    { text: 'andar de bicicleta', value: 'bike' },
]

class atividades extends Component {

    constructor(props){
        super(props)
    }

    componentWillMount(){
        this.props.searchWorkout()
    }

    render() {

        const { addWorkout, searchWorkout, tempoGasto, tipoTarefa, data} = this.props
        return (
            <div role='form'>
                <h6>Inserir atividade</h6>
                <Form>
                    <Form.Group widths='equal'>
                        <Form.Input fluid placeholder='Tempo gasto' />
                        <Form.Select
                            fluid
                            label='Atividade'
                            options={workoutOptions}
                        />

                        <Button animated='vertical'>
                            <Button.Content hidden>Shop</Button.Content>
                            <Button.Content visible>
                                <Icon name='shop' />
                            </Button.Content>
                        </Button>

                    </Form.Group>
                </Form>
            </div>
        )
    }
}

const mapStateToProps = state => ({tempoGasto: state.workout.tempoGasto, tipoTarefa: state.workout.tipoTarefa, data: state.workout.data})
const mapDispatchToProps = dispatch => 
    bindActionCreators({ addWorkout, searchWorkout }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(atividades)

It's not showing nothing in the console, but the element workout is not rendering, the visual studio code says that the import is not being used.

Upvotes: 1

Views: 236

Answers (1)

Craig Gehring
Craig Gehring

Reputation: 3377

The first letter of React components must be capitalized or it thinks it’s a built in component like div or p or span.

This link has more info: ReactJS component names must begin with capital letters?

Upvotes: 2

Related Questions