cannot set value for controls on reactjs bootstrap html tooltip - html

Question

I am trying to get something like x-editable inline edit in reactjs. I am able to get the HTML form/control inside the bootstrap tooltip, however, not able to set or change value on the input control on the popover. Below is the code.
class Inline extends React.Component {
constructor(props, context) {
super(props, context);
this.state= {
displayText: props.displayText,
valueText : props.valueText
}
}
componentDidMount() {
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
}
onChange(e) {
console.log('on change : ' + e.target.value)
this.setState({ displayText: e.target.value });
}
handleClick (e) {
e.preventDefault();
console.log('The link was clicked.');
}
render(){
return (
<div className="container">
<ul className="list-unstyled inline-edit">
<li><a data-placement="bottom" data-toggle="popover" data-title="Inline Edit <a href='#' class='close' data-dismiss='alert'>×</a>" data-container="body" type="button" data-html="true" href="#" >{this.state.displayText}</a></li>
<div id="popover-content" className="hide">
<div className="form-group">
<span>{this.state.displayText}</span>
<input type="text" placeholder="Name" className="form-control"
value={this.state.displayText}
onChange={this.onChange}
></input>
<div className="form-group edit-control">
<a href="#" role="button" onClick={this.handleClick}><i className="fa fa-check-circle fa-2x green"/></a>
<a href="#" role="button" ><i className="fa fa-times-circle fa-2x red leftpad"/></a>
</div>
</div>
</div>
</ul>
</div>
);
}
};
Inline.propTypes = {
displayText: PropTypes.string.isRequired,
valueText: PropTypes.string.isRequired
};
export default Inline;
Screen shot

Answer 1

The issue is in the way your popover is created:
componentDidMount() {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
}
You are using jquery html() function to duplicate a Html DOM element in the bootstrap popover. When duplicating an html element this way, the JavaScript React logic is not attached to the duplicated html code.
You can't only use the bootstrap tool tip to created the popover. You have to:
Either manually instantiate a react component in the popover (using the ReactDom render function).
Or (the better solution I think) use the dedicated react bootstrap lib that provide the popover bootstrapreact component