Component is not being rendered

Question

In my app.jsx file I have the import of the component "activities":

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 H1 is rendered.

This is my 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)

No error is shown in the console, but the element is not rendered.

Answer 1

Try this !

import Activities from '.. /activities/activities'

And then call in the render the name Activities in capital letters.