CODEWITHSUNDEEP
reactjs
Olga
Olga

Reputation: 159

React onClick does not work

I have parent component TodoItem and two children components: EditTodoItem and ShowTodoItem. I switch this children components using state edition. If it is true, EditTodoItem is shown. When edition is false, ShowTodoItem is rendering. When we click on ShowTodoItem, edition should become true. But this code doesn't work:

import React from 'react'
import PropTypes from 'prop-types'
import ShowTodoItem from './TodoItem/ShowTodoItem'
import EditTodoItem from './TodoItem/EditTodoItem'

export default class TodoItem extends React.Component {
    constructor(props) {
        super(props);
        this.handleOnTodoClick = this.handleOnTodoClick.bind(this);
        this.handleOnEnterPress = this.handleOnEnterPress.bind(this);
        this.state = { edition: false };
    }

    handleOnTodoClick() {
        console.log('edit');
        this.setState({ edition: true });
    }

    handleOnEnterPress() {
        this.setState({ edition: false });
    }

    render() {
        if (this.state.edition) {
            return (
                <EditTodoItem item={this.props.item} onTodoChange={this.props.onTodoChange} onEnterPress={this.handleOnEnterPress} />
            );
        }
        return (
            <ShowTodoItem onClick={this.handleOnTodoClick} item={this.props.item} onRemoveTodoClick={this.props.onRemoveTodoClick}  />
        );
    }
}

I have no errors in browser console, but I also don't have the result of console.log('edit');

Upvotes: 1

Views: 1792

Answers (1)

Stephen L
Stephen L

Reputation: 2339

onClick does not fire on custom components, it only fires on dom nodes created from jsx. When you pass onClick to a custom component, it gets passed in as a prop. Make sure your code in ShowItemTodo has a line that looks like this:

return (
  <button onClick={this.props.onClick}>click me</button>
)

Upvotes: 6

Related Questions