React state is udpate but not in the css doodle tag

Question

The state of the app is ok. It is updating when I change a value in the textarea I can see the changement in the state component with the react utility but the css doodle don't update. I must refresh manually to see the changes I don't understand why. Thanks a lot

class App extends Component {
  state ={

    dood: doodText

  }

componentDidMount(){
const dood=localStorage.getItem('dood')

if(dood){

  this.setState({dood})

}
else{
  this.setState({dood: doodText})
}
}

componentDidUpdate(){

const {dood}= this.state
localStorage.setItem('dood', dood)

}

  handleChange = event =>{
var dood= event.target.value

this.setState({dood})
  }

  render(){

  return (

    <div className="container" onChange={this.handleChange} >

      <div className="row">
        <div className="col-sm-6">
        <textarea onChange={this.handleChange} value={this.state.dood}
        className="form-control"
        rows="25"  /> 

        </div>
      </div>

      <div className="col-sm-6" onChange={this.handleChange} >

  <css-doodle >{this.state.dood}</css-doodle>

      </div>
    <div>
    </div>
    </div>

  );
}
}
export default App;

score 0 · Answer 1 · answered Sep 02 '19 at 20:41

Just set some order

I think its should work, I add a div with dood inside to see if its work.

And I write some comment for you.

class App extends Component {

  constructor() {
    super();
    this.handleChange = this.handleChange.bind(this);
  }

  state = {
    dood: doodText
  }

  componentDidMount() {
    const dood = localStorage.getItem('dood')
    if (dood) {
      this.setState({ dood })
    }
    // THIS ELSE DO NOT NECESSARY
    // else {
    //   this.setState({ dood: doodText })
    // }
  }

  componentDidUpdate() {
    // FOR WHY IS THAT HAPPEN EVERY UPDATE?
    const dood = this.state.dood
    localStorage.setItem('dood', dood)
  }

  // USE BIND IS BETTER
  handleChange(ev) {
    var dood = ev.target.value
    this.setState({ dood })
  }

  render() {
    return (
      <div className="container" >
        <div className="row">
          <div className="col-sm-6">
            <textarea onChange={this.handleChange} value={this.state.dood}
              className="form-control"
              rows="25" />
          </div>
        </div>

        <div>{dood}</div>

        <div className="col-sm-6" >
          <css-doodle >{this.state.dood}</css-doodle>
        </div>
      </div>
    );
  }
}
export default App;

thanks but it nor worked. So i add a button that refresh the page when i click. I wanted that when i type my text in the textarea the css div update without refresh — Arno, Sep 03 '19 at 10:28

score 0 · Answer 2 · answered Sep 07 '19 at 23:33

0

css-doodle provides an .update() method to manually update it, see: https://css-doodle.com/#js-api-update

So you can listen to the change or input event of the textarea and then call .update()

answered Sep 07 '19 at 23:33

yuanchuan

56
4

React state is udpate but not in the css doodle tag

2 Answers2

Just set some order