Markdown Previewer: Why editor´s value doesn´t change

JavaScript
1

I´m trying to understand why with this code:

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      mark: defaultText
    }
  }

  render(){
    return (<div className="testing">
        <h1>Welcome to my React Markdown Previewer!
</h1>
        <div className="dividir">
        <Editor />
        <Previewer value={this.state.mark} />
        </div>
    </div>
      )
  }
}


class Editor extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return (<textarea id="editor" placeholder="type something..." onChange={this.handleChange}/>);
  }
}

class Previewer extends React.Component {
  render() {
    return (
      <div id="preview">OUTPUT</div>
        )
  }
}

const defaultText = `# Welcome to my React Markdown Previewer!

## This is a sub-heading... etc `

The editor´s value doesn´t get updated and it isn´t shown: `

# Welcome to my React Markdown Previewer!

## This is a sub-heading...

in the previewer. After setting the value of Previewer with the state of App (which is the defaultText variable) it doesn´t change anything still.

SO i just tried to do…

<Previewer value="testing teesting" />

And neither it changes so I really don´t understand what it needs to be done. To be honest I am not surprised since I don´t really know how React could know that when I say value im referring to textarea value

This is my codepen where I´m doing it: https://codepen.io/Assblack/pen/YbWyWw

2

React has two ways to trigger a re-render: either with state or props changing.

For instance when you declare

<Previewer value={this.state.mark} />

Means you are passing to Previewer a value prop.
But then nowhere in that component you use that prop

class Previewer extends React.Component {
  render() {
    return (
      <div id="preview">OUTPUT</div>
        )
  }
}

Conceptually they behave just like javascript function, what would happen if a JS function would be written like this?

function sayName(name){
  return 'FreeCodeCamp';
}

It doesn’t matter which name you pass to that function it will always return FreeCodeCamp.

Hoe this will get you started :+1:

1 Like
3

Definetely, I got it instantly after reading your second paragraph…thanks a lot.