Help with React Markdown Previewer

Help with React Markdown Previewer
0

#1

I´m having troubles making the Input from the text area go to the Marked interpreter (getting a TypeError: Cannot read property ‘value’ of null). Any ideas on how to fix it?

Text area input:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Some markdown text.'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

createMarkup() 
{
return {__html: marked(this.state.value)};
}

  render() {
    return (
           <div>
          <textarea value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample />
          </div>
    );
  }
}

Previewer:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText(props) {
    var rawMarkup = marked(this.state.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.state.value.getMarkdownText()} />
  }
}

export default MarkdownExample;

#2

I think it looks like this.state.value isn’t available in your MarkdownExample component, as it’s not set there and isn’t passed in - perhaps pass the value in as a prop


#3

Thank you for the reply. I tried doing that using “props.state.value” but still won´t budge. Don´t know what I´m doing wrong.


#4

it depends how you pass it in -
try something like this…
<Component nameOfProp={this.state.whateverYouWantToSend} />
then use it in the other component sort of like this…
this.props.nameOfProp


#5

Tried that, still getting errors:

Editor:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";

class Editor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Some markdown text.'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

createMarkup() 
{
return {__html: marked(this.state.value)};
}

  render() {
    return (
           <div>
          <textarea value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample = {this.state.value} />
          </div>
    );
  }
}

Previewer:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText(props) {
    var rawMarkup = marked(this.props.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.props.value.getMarkdownText()} />
  }
}

export default MarkdownExample;

#6

you tried something, but it doesn’t look like what I suggested


#7

Sorry, I thought I was doing what you suggested. I guess I´m having troubles understanding how to pass props.


#8

alright, let me try and be more specific…
<MarkdownExample value={this.state.value} />
then use it in that component like this…
this.props.value


#9

Update: I think did what you suggested. But now I´m getting: “TypeError: this.props.value.getMarkdownText is not a function”
Editor:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";
import MarkdownExample from "./previewer";

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }


  render() {
    return (
           <div>
          <textarea value={this.state.value} onChange={this.handleChange}/>
          <MarkdownExample value={this.state.value} />
          </div>
    );
  }
}

Previewer:

import React, { Component } from 'react';
import './App.css';
import marked from "marked";

class MarkdownExample extends React.Component {
  getMarkdownText(props) {
    var rawMarkup = marked(this.props.value, {sanitize: true});
    return { __html: rawMarkup };
  }
  render() {
    return <div dangerouslySetInnerHTML={this.props.value.getMarkdownText()} />
  }
}

export default MarkdownExample;

#10

yea, that doesn’t look right - I suppose you better debug it


#11

Yeah. I´m now stuck trying to make this function work, lol.


#12

Fixed it! Had to redo a couple of things but now it works. One final question: how can I use the cdn test that Freecodecamp uses in React?


#13

nice job - add this script somewhere in your project https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js - probably somewhere after everything else to be safe