Can't remove ReactJS Element without breaking code

Question

I'm having trouble with internested brackets in React JS. I want to remove the comment form at the base of this webpage:

https://codepen.io/Teeke/pen/rNOmYzb

The entire code to generate the comment form is here:

var AddPostForm = React.createClass({ displayName: "AddPostForm",
  createPost: function (event) {
    event.preventDefault();
    // take the data from the form and create an object
    var post = {
      title: this.refs.title.value,
      name: this.refs.name.value,
      desc: this.refs.desc.value,
      image: this.refs.image.value };

// add the post to the App State
this.props.addPost(post);
this.refs.postForm.reset();


},
  render: function () {
    return (
      React.createElement("div", { className: "callout secondary form-area" },
      React.createElement("h5", null, "Comments!"),
      React.createElement("form", { className: "post-edit", ref: "postForm", onSubmit: this.createPost },
      React.createElement("label", null, "Post Title",
      React.createElement("input", { type: "text", ref: "title", placeholder: "Post Title", required: true })),

      React.createElement("label", null, "Your Name",
      React.createElement("input", { type: "text", ref: "name", placeholder: "Full Name required", required: true })),

      React.createElement("label", null, "Tell the World",
      React.createElement("textarea", {
        ref: "desc",
        placeholder: "Write your post here", required: true })),

  React.createElement("label", null, "Image URL - ", React.createElement("span", { className: "highlight" }, "use this one to test ''"),
  React.createElement("input", { type: "url", ref: "image", placeholder: "The URL of the featured image for your post", required: true })),

  React.createElement("button", { type: "submit", class: "button" }, "Add Post"))));

  } });

1) I removed lines 227 to 267

2) I removed the following line
React.createElement(AddPostForm, { addPost: this.addPost }))));

3) I removed the closing brace } in line 222.

4) Removing various combinations of } }); still breaks the code.

What lines do I need to remove to remove the comments form without breaking the code?

Zachary Haber · Accepted Answer · 2020-04-26 17:52:25Z

2

I removed the comments sections of the code. The main advice I'd give you for doing something like this is to format your code using something like prettier. It gives you a far better idea of where the nested braces and parenthesis are.

I commented out the whole AddPostForm variable declaration. And these lines:

    // React.createElement(
    //   'div',
    //   { className: 'list-of-posts' },
    //   Object.keys(this.state.posts).map(this.renderPost)
    // ),

    // React.createElement(AddPostForm, { addPost: this.addPost })

These lines were the ones that were the main reason why the AddPostForm was being rendered. Though there is no point in having the AddPostForm in the code if it is unused.

https://codepen.io/ZachHaber/pen/PoPmOgR

As requested, here is my thought process as I worked on this:

Though I will note, the console messages were mostly not-helpful.

I uncommented everything to get the pen back to a running state, then I pasted the script code into my local version of VSCode where I re-formatted it using prettier. Then I found the segments of code that rendered the offending sections and commented them out.

The unfortunate thing is that once you have an unbalance of parentheses and braces you generally have to do a lot of work to figure out where they should be.

I just pasted in the script as you had it to vscode to see if I could get it:

It started off with telling me there was an error on line 64: By this error, I realized there was an extra comma telling it that it thought we were still defining argument values. I.e. funct(a,

So I removed that comma, and then it told me ',' expected, which Is what it says at the end of an argument when things aren't closed off.

I started to add parentheses noting where VSCode told me those parentheses matched up to. IT's a little hard to see in the picture, but it's the open parens in the third React.createElement call.

Then I added the rest of the parentheses until the parentheses at the return function matched. At which point the error disappeared.

edited Apr 26, 2020 at 17:52

answered Apr 26, 2020 at 17:36

Zachary Haber

11.1k1 gold badge22 silver badges34 bronze badges

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

3 Comments

RubyRube Over a year ago

Thanks for that. I will make sure to format the code better in future. Can you go into how you traced the bug using the console? Are there any online tools that help you fix nested brackets?

Zachary Haber Over a year ago

I don't know if there are any tools online specifically to help you fix nested brackets, but I added how I went about it from both sides of the problem. Mostly I just took it to a tool that I was familiar with and went through solving the next problem until it's done.

RubyRube Over a year ago

That's an excellent answer. I think it'll help a lot of people out. I guess you have to use the console as much as possible, reason about the code, and use a little trial and error. I use the same process, but you made it clearer. I just shared it to /r/learnjavascript on Reddit.

Collectives™ on Stack Overflow

Can't remove ReactJS Element without breaking code

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related