0

I'm making a markdown editor using Marked library like this <div id="preview" dangerouslySetInnerHTML={ {__html: marked('Rendered by **marked**.''></div> but get TypeError: Object(...) is not a function.

Found two relevant posts on SO; first and second I'm using the same syntax as the answers but I get a TypeError. In both posts they used ReactDOM.render() method in the end. Full code:

import React, { Component } from 'react';
import './App.css';
import { Provider, connect } from 'react-redux';
import { createStore } from'redux';
import { marked } from "marked";

// Redux
const ADD = "ADD";

const addText = (text) => {
  return {
  type: ADD,
  text: text
  }
};

const textReducer = (state = {text: ''}, action) => { 
  switch(action.type) {
    case ADD:
    return Object.assign({},state, { text: action.text })
    default:
    return state
  }
};

const store = createStore(textReducer);

// React
 class App extends Component {
  constructor(props){
    super(props)
    /*this.state = {
      input : ''
    }*/
  this.handleChange = this.handleChange.bind(this);

};

  handleChange(e){
    /*this.setState({
      input: e.target.value
    })*/

    this.props.addText(e.target.value)
  };

  render(){
    return(
      <div className="App-header">
       <textarea id="editor" value={this.props.text} onChange={this.handleChange}></textarea>
       <div id="preview" dangerouslySetInnerHTML={ {__html: marked('Rendered by **marked**.') } }></div>
      </div>
    )
  }
};


// React-Redux
const mapStateToProps = (state) => {
  return {
    text: state.text
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    addText: (text) => { 
      dispatch(addText(text))
    }
  }
};

const Container = connect(mapStateToProps, mapDispatchToProps)(App);

// eslint-disable-next-line
export default class AppWrapper extends Component {
  render() {
    return(
      <Provider store={store}>
        <Container />
      </Provider>
    );
  }
};

The markdown text suppose to be rendered as html in preview element but instead I get TypeError: Object(...) is not a function.

UPDATE: apparently redux was not setup properly and was set to an array instead of object. I fixed that but I still get the same error.

1
  • I also made a Codesandbox version of this App here, in case you want to see the error yourself. Commented May 15, 2019 at 15:59

1 Answer 1

0

I found the solution, problem was I imported marked as named import {import {marked} from 'marked' instead of import as default like this import marked from 'marked'

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.