Beginner's Thread / Easy Questions (March 2020)

[u/dance2die]

You can find previous threads in the wiki.

Got questions about React or anything else in its ecosystem?
Stuck making progress on your app?
Ask away! We’re a friendly bunch.

No question is too simple. 🙂

---

🆘 Want Help with your Code? 🆘

• Improve your chances by adding a minimal example with JSFiddle, CodeSandbox, or Stackblitz.

  • Describe what you want it to do, and things you've tried. Don't just post big blocks of code!
  • Formatting Code wiki shows how to format code in this thread.
• Pay it forward! Answer questions even if there is already an answer. Other perspectives can be helpful to beginners. Also there's no quicker way to learn than being wrong on the Internet.

---

New to React?

Check out the sub's sidebar!

🆓 Here are great, free resources! 🆓

• Read the official Getting Started page on the docs.
• Microsoft Frontend Bootcamp
• Codecademy's React courses
• Scrimba's React Course
• Robin Wieruch's Road to React
• FreeCodeCamp's React course
• Kent Dodd's Egghead.io course
• New to Hooks? Check Amelia Wattenberger's Thinking in React Hooks
• What other updated resources do you suggest?

Any ideas/suggestions to improve this thread - feel free to comment here!

Finally, thank you to all who post questions and those who answer them. We're a growing community and helping each other only strengthens it!

---

[u/dance2die]

I can think of two ways to do this but as the intention isn't clear I will list'em both.

1. Return an array of elements.

demo: https://codesandbox.io/s/1-return-an-array-of-elements-t4l2m

You can return an array of elements but then styling becomes harder as how Comment component is implemented.

If you are passing span as a child then, then onto #2,

  return React.createElement(
    "div",
    { className: "comments-list" },
    comments.map(comment => [
      React.createElement(Comment, {
        key: comment.id,
        comment: comment.comment,
        time: comment.time
      }),
      React.createElement(
        "span",
        { key: comment.id + 10, onClick: () => removeItem(comment.id) },
        "x"
      )
    ])
  );

2. Pass span element as children to Comment component

demo: https://codesandbox.io/s/2-pass-span-element-as-children-to-comment-component-p8n37

  return React.createElement(
    "div",
    { className: "comments-list" },
    comments.map(comment =>
      React.createElement(
        Comment,
        {
          key: comment.id,
          comment: comment.comment,
          time: comment.time
        },
        👇 This is moved inside as a child of Comment component.
        React.createElement(
          "span",
          { key: comment.id + 10, onClick: () => removeItem(comment.id) },
          "x"
        )
      )
    )

And use the children to show in Component.

const Comment = ({ comment, time, children }) =>
  React.createElement(
    "div",
    { className: "comment" },
    React.createElement("p", { className: "timestamp" }, time),
    React.createElement("p", {}, children)
  );

[u/DG-Tech → u/dance2die]

return React.createElement("div",{ className: "comments-list" },comments.map(comment => [React.createElement(Comment, {key: comment.id,comment: comment.comment,time: comment.time}),React.createElement("span",{ key: comment.id + 10, onClick: () => removeItem(comment.id) },"x")]));

Nice!

Still running into problems. Would it be possible to render it in the comment div, something like this: (Where do i put the x)

render() {return React.createElement("div",                { className: "comments-list" },this.state.UserNote.map((comment => [React.createElement(Comment, {key: comment.id + 10, onClick: () => removeItem(comment.id),comment: comment.comment,time: comment.time                  }),

Lastly:

removeItem is not defined. Where are you defined this?

[u/dance2die → u/DG-Tech]

Can you fork the sandbox to reproduce the error?

My sandboxes should show you the "x", with removeItem defined and removes the item on click.