Join the conversation

Sign in to join this conversation, and others like it, in the communities you care about.

Frontend Hub

General

Talk anything related Frontend development, HTML/CSS, client side Javascript, Bootstrap, etc

More active conversations

Frontend Hub / General

CodePen Todo list debug

CodePen Todo list debug

Frontend Hub/General · April 22, 2019 at 11:19pm

Rieder

@rieder
rep
26

CodePen Todo list debug

Frontend Hub / General · April 22, 2019 at 11:19pm

I am doing a front-end dev practice.

Here is my codepen project(https://codepen.io/Riederlee/pen/wQPrJo) In this project, there are two sections:

First part: there will be a todolist example which you can add some items.

Second part: I created a 2x2 table by using React. It turns out that the table cannot be seen on the screen so there must be something wrong.

I have a really hard time in finding bugs :(

April 30, 2019 at 6:30am
Jayendra Sharan@jayendrasharan
6:30am

I suspected this. There is no issue with your React code. The problem is React library load time versus the execution of your code. Your code is getting executed before the library loads and hence the JavaScript execution is not able to parse the React JSX syntax. I copied your exact code and created a sandbox, and it works.

https://codesandbox.io/embed/3yx4189vnq

    • reply
    • like
    Rieder@rieder
    6:52am

    Thanks man! I found this too. Do you think it is because I write JQuery and REACT in the same script file?

      • reply
      • like
      6:53am

      I mean in the real project. Of course, I will separate this two. But it is codepen

        • reply
        • like
        Jayendra Sharan@jayendrasharan
        7:03am

        I suspect, the JS of codepen is running before the React dependencies are loaded. Writing in one script file shouldn't be an issue.

          • reply
          • like
          May 1, 2019 at 2:36am
          PRITI RATHOD@reachpriti
          2:36am

          https://community.vanila.io/women-coders

            • reply
            • like