Front End Development Libraries Projects - Build a Markdown Previewer

[xispector]

Tell us what’s happening:
Hi, I have been making a markdown previewer so far in visual studio using CDN. I am trying to accomplish all tests except 7, but I can’t pass user story 3, and 4, so I would happy to let me know what is the problem.

Though I didn’t design it, I have finished implementing this project functionally. I made it with react, and redux. There are two sections editor and previewer as example. When I enter text in the editor, the previewer renders the text into a markdown very well. I think that it has no problem to pass the user story test, but the tester doesn’t think so. How can I fix it to pass the test?

this is my project so far: React App

Your code so far

Code of actionType.js in actionTypes folder

const CHANGE = "CHANGE";

Code of action.js in actions folder

import { CHANGE } from '../actionTypes/actionType';

export const changeItem = (input) => ({
  type: CHANGE,
  input: input
})

Code of reducer.js in reducers folder

import { CHANGE } from '../actionTypes/actionType'

const initialState = {
  input: `
  # This is a markdown previewer
  ## You can so many things with markdown such as...
  make a [link](https://www.naver.com/) like this

  make a \`printf("inline code")\` like this

  make a 
  \`\`\`
  code
  block
  \`\`\` 
  like this

  make a 
  - list 
    - item
  like this

  make a 
  > blockquote
  like this

  make a 
  ![image](https://static-00.iconduck.com/assets.00/no-copyright-icon-256x256-13fmjw76.png)
  like this

  make a **bolded text** like this`
}

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case CHANGE:
      return {
        ...state,
        input: action.input
      };
    default:
      return state;
  }
};

Code of store.js

import { legacy_createStore as createStore } from 'redux';
import { reducer } from './reducers/reducer';

export const store = createStore(reducer);

Code of main.js in components folder

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { changeItem } from '../actions/action';
import { marked } from 'marked';

export function Main () {
  const state = useSelector(state => state);
  const dispatch = useDispatch();

  return (
    <div className='container'>
      <div className='row'>
        <div id='edit' className='col-6 text-center'>
          <header><h1>Editor</h1></header>
          <main>
            <textarea id='editor' value={state.input} onChange={(event) => {dispatch(changeItem(event.target.value))}}></textarea>
          </main>
        </div>
        <div id='preview' className='col-6'>
          <header><h1>Previewer</h1></header>
          <main>
            <p id='preview' dangerouslySetInnerHTML={{__html: marked.parse(state.input)}}></p>
          </main>
        </div>
      </div>
    </div>
  )
}

Code of App.js

import './App.css';
import { Provider } from 'react-redux';
import { store } from './store';
import { Main } from './components/main';


function App() {
  return (
    <Provider store={store}>
      <Main />
    </Provider>
  );
}

export default App;

Your browser information:

User Agent is: Chrome/108.0.0.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

freeCodeCamp.org