Question 229965 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Non used JS function interferes with actual HTML/JS/Babel code

On the code below I expected that (console logged) object props only contains member: className but it contains members: { className, id, ticket, request }. However, if I remove param ...others from non used function: NullComp, then the only member of object props is: className, which is what I was expecting initially.

You can try it by yourself by running the code below:

with: ...others:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function GoalComp({
      id,
      ticket,
      request,
      ...props
    }) {
      console.log(props);
      return <div>Independent Retriever</div>;
    }
  </script>
  <script type="text/babel">
    function NullComp({ timeRanges, ...others }) {
      return null;
    }
  </script>
  <script type="text/babel">
    const { useState, useEffect } = React;
    const App = () => {
      return (
        <GoalComp
          className="mt-10"
          id="1"
          ticket="IT-ABCD"
          request="Peace and Love"
        />
      );
    };
    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>
</body>
</html>

without: ...others:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    function GoalComp({
      id,
      ticket,
      request,
      ...props
    }) {
      console.log(props);
      return <div>Independent Retriever</div>;
    }
  </script>
  <script type="text/babel">
    function NullComp({ timeRanges }) {
      return null;
    }
  </script>
  <script type="text/babel">
    const { useState, useEffect } = React;
    const App = () => {
      return (
        <GoalComp
          className="mt-10"
          id="1"
          ticket="IT-ABCD"
          request="Peace and Love"
        />
      );
    };
    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>
</body>
</html>

What I’m I missing here?

Tags:

2

Answers


  1. 0

    The behavior you’re observing is actually expected and is not influenced by the presence or absence of the ...others in the NullComp function. The key thing to note is that the NullComp function isn’t being used or invoked anywhere in the provided code, so it has no effect on the output of the GoalComp function.

    Let’s break down what’s happening:

    In the GoalComp function, you’re using destructuring to extract the id, ticket, and request properties from the props. The rest of the properties (if any) are collected into the props object using the spread operator (...props).

    When you render the GoalComp component inside the App component, you’re passing the following props:

    • className="mt-10"
    • id="1"
    • ticket="IT-ABCD"
    • request="Peace and Love"

    Given this, when these props are passed to GoalComp, the id, ticket, and request properties are extracted, leaving the className property to be collected into the props object. This is why, when you console.log(props), you see an object with a single property: { className: "mt-10" }.

    The presence or absence of the ...others in the NullComp function is irrelevant in this context. Since NullComp isn’t being used, whether it has ...others or not doesn’t affect the output of the GoalComp function.

    In summary, the code is working as expected. The NullComp function isn’t influencing the output of the GoalComp function in any way.

    Hope this helps!

    Login or Signup to reply.
  2. 0

    Using babel standalone is really not meant for production.

    But out of curiosity I thought it would be fun to see why this breaks.

    If you compile GoalComp in babel, for a target that doesn’t support spread syntax, you will notice it creates a global ->

    var _excluded = ["id", "ticket", "request"];

    On the other hand if you compiled both GoalComp & NullComp with the spread operators together you will get ->

    var _excluded = ["id", "ticket", "request"],
  _excluded2 = ["timeRanges"];

    But if you do them as separate scripts/compiles.

    You would end up with.

    var _excluded = ["id", "ticket", "request"],
var _excluded = ["timeRanges"];

    To get around this you could place the functions on a global, but you will also need to set the scripts data-type="module" to keep those _excluded scoped locally.

    eg.

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    //somewhere to store the functions
    const GF = {};
  </script>
  <script type="text/babel" data-type="module">
    function GoalComp({
      id,
      ticket,
      request,
      ...props
    }) {
      console.log(props);
      return <div>Independent Retriever</div>;
    }
    GF.GoalComp = GoalComp;
  </script>
  <script type="text/babel" data-type="module">
    function NullComp({ timeRanges, ...others }) {
      return null;
    }
  </script>
  <script type="text/babel" data-type="module">
    const { useState, useEffect } = React;
    const App = () => {
      return (
        <GF.GoalComp
          className="mt-10"
          id="1"
          ticket="IT-ABCD"
          request="Peace and Love"
        />
      );
    };
    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search