ReactJS: onClick change element

Question

I've just started learning React and have a question.

I want to do the following:

If a user clicks on a paragraph I want to change the element to an input field that has the contents of the paragraph prefilled. (The end goal is direct editing if the user has certain privileges)

I'm come this far but am totally at a loss.

var AppHeader = React.createClass({
    editSlogan : function(){
        return (
            <input type="text" value={this.props.slogan} onChange={this.saveEdit}/>
         )
    },
    saveEdit : function(){
        // ajax to server
    },
    render: function(){
        return (
            <header>
                <div className="container-fluid">
                    <div className="row">
                        <div className="col-md-12">
                            <h1>{this.props.name}</h1>
                            <p onClick={this.editSlogan}>{this.props.slogan}</p>
                        </div>
                    </div>
                </div>
            </header>
        );
    }
});

How can I override the render from the editSlogan function?

Answer 1

If I understand your questions correctly, you want to render a different element in case of an "onClick" event.

This is a great use case for react states.

Take the following example

React.createClass({ 
    getInitialState : function() {
       return { showMe : false };
    },
    onClick : function() {
       this.setState({ showMe : true} );
    },
    render : function() {
        if(this.state.showMe) { 
            return (<div> one div </div>);
        } else { 
            return (<a onClick={this.onClick}> press me </a>);
        } 
    }
})

This will change the components state, and makes React render the div instead of the a-tag. When a components state is altered(using the setState method), React calculates if it needs to rerender itself, and in that case, which parts of the component it needs to rerender.

More about states https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

Answer 2

You can solve it a little bit more clear way:

class EditableLabel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            text: props.value,
            editing: false
        };
        this.initEditor();
        this.edit = this.edit.bind(this);
        this.save = this.save.bind(this);
    }

    initEditor() {
        this.editor = <input type="text" defaultValue={this.state.text} onKeyPress={(event) => {
            const key = event.which || event.keyCode;
            if (key === 13) { //enter key
                this.save(event.target.value)
            }
        }} autoFocus={true}/>;
    }

    edit() {
        this.setState({
            text: this.state.text,
            editing: true
        })
    };

    save(value) {
        this.setState({
            text: value,
            editing: false
        })
    };

    componentDidUpdate() {
        this.initEditor();
    }

    render() {
        return this.state.editing ?
            this.editor
            : <p onClick={this.edit}>{this.state.text}</p>
    }
}

//and use it like <EditableLabel value={"any external value"}/>;