Adding script within jsx

Question

In my jsx file I have the following function:

function GetComments({commentsArray}) {
        return commentsArray.map((comment) => {
        let localId = comment.LocalId;
          return (
            <div className="comments-container">
                <div className="commenter">
                    <span className="id-label">{comment.LocalId}</span>
                        <script>
                            if (comment.ParentCommentId !== null) {
                               document.write("<span class=reply title=in reply to " + comment.LocalId + "></span>") 
                            }
                        </script>
                </div>
            </div>
          );
        });
}

Now I don't get any errors but when that script tag part is in there, the page just doesn't load, it's just constantly stuck trying to load. Where have I gone wrong with adding a script to this? I am only wanting that element created when that condition is met. I have been looking online and I see that it's different in jsx for adding scripts but confused on how to correctly implement my script

Is it necessary for it to be contained within a <script> tag? Conditional rendering would work, as dheeraj pointed out, but I think the script and document.write() can be removed. — logz11
– logz11, Commented Aug 13, 2022 at 17:59

thisisrandy · Accepted Answer · 2022-08-15 21:42:07Z

1

There are a few problems with your code, the biggest of which is the use of document.write, which you should never be using in react code. To understand why, it's important to realize that one of the most fundamental design goals of react is to abstract any direct manipulation of the DOM away from the programmer and instead allow them to specify the way in which a lighter weight virtual DOM reacts to state changes. Try something like the following:

export function GetComments({ commentsArray }) {
  return (
    <>
      {commentsArray.map((comment) => {
        const localId = comment.LocalId;
        return (
          <div key={localId} className="comments-container">
            <div className="commenter">
              <span className="id-label">{localId}</span>
              {comment.ParentCommentId && (
                <span className="reply" title={`in reply to ${localId}`} />
              )}
            </div>
          </div>
        );
      })}
    </>
  );
}

In addition to doing away with document.write, this addresses the following issues:

Consistent use of localId.
Conditional rendering to render the "reply" span when comment.ParentCommentId is truthy.
Template literals to more clearly express the "in reply to" string. This is maybe a bit more of a style issue than a functional one, but template literals are the modern way to format variables into string templates.
The use of key inside the map to "help React identify which items have changed, are added, or are removed."
Wrapping the whole map expression in a fragment so that it has a return type which is not an array, which is a requirement for it being used as a JSX element.

edited Aug 15, 2022 at 21:42

answered Aug 13, 2022 at 18:25

thisisrandy

3,0853 gold badges16 silver badges27 bronze badges

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

5 Comments

lross15 Over a year ago

Thank for the really detailed answer, much appreciated. However would you know why for the <> just after the first return I am getting an "unexpected token" error?

thisisrandy Over a year ago

You could be using an older version of react. The so-called short syntax for fragments was introduced in v16.2.0. If you are for some reason tied to an earlier version, you can use <React.Fragment> ... </React.Fragment> instead.

lross15 Over a year ago

ah that was it thanks. Still having an issue though as it is printing out comment.ParentCommentId && for each element rather than that being a condition if that makes sense?

thisisrandy Over a year ago

That was my fault forgetting to surround that section in curly braces. Please see the revised code.

lross15 Over a year ago

That was it, working now. Thank you for that and thanks again for the in depth explanation, given me a much better understanding on how it works and how I should be going about this

lross15 · Accepted Answer · 2022-08-13 18:20:50Z

I have managed to actually come up with a way to solve the issue, don't know if this is the best way.

I created an additional function where I pass the id into it and do the check there.

function ParentIdCheck({id}) {
    if (id !== null) {
        return(
            <span className="reply" title={"in reply to " + id}></span>
        );
    }
}

and now the original function looks like:

function GetComments({commentsArray}) {
        return commentsArray.map((comment) => {
        let localId = comment.LocalId;
          return (
            <div className="comments-container">
                <div className="commenter">
                    <span className="id-label">{comment.LocalId}</span>
                    <ParentIdCheck id = {comment.ParentCommentId}/>
                </div>
            </div>
          );
        });
}

I don't know if this is the best way though, so open to suggestions on how to improve this

Collectives™ on Stack Overflow

Adding script within jsx

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related