React error when form declared in a variable

Question

I am doing a react. I just created this component called Input.jsx

import React from "react";

const Input = (label, placeholder) => {
  return (
    <label htmlFor={label}>
      {label}
      <input type="text" placeholder={placeholder} />
    </label>
  );
};

export default Input;

I imported it and used it in index.js

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => {
  const InputDrop = input("label", "placeholder");
  return (
    <div>
      <InputDrop />
    </div>
  );
};

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

This doesn't work and I get this errors in the console

But, if I do it without declaring the form in a var, it works, like this:

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => {
  return <div>{input("label", "placeholder")}</div>;
};

export default App;

ReactDOM.render(<App />, document.getElementById("root"));

I don't know why is not working. All type of help or suggestion is appreciated

Answer 1

You should never invoke components like functions . reactjs does this for you internally via the React.createElement() method as babel transpiles it for you during compilation.

1. React function components accept props as their first argument, which is an object of passed properties to the component. Using the ES6 destruct syntax:

    // note the curly braces { } for destructuring const InputDrop = ({ label, placeholder }) => ( <label htmlFor={label}> {label} <input type="text" placeholder={placeholder} /> </label> )

2. You should be passing props instead of invoking the component as a function directly

   <InputDrop label="label" placeholder="placeholder" />

But in general, without meaning to sound condescending it really sounds like you should give a thorough read of the react docs , the very basics at least. Luckily for you, it's one of the best documentations out there, so it's pretty easy to read and learn.

Answer 2

You should either use it directly as a component

import Input from "./components/Input.jsx";

const App = () => {
  return (
    <div>
      <Input label="label" placeholder="placeholder"/>
    </div>
  );
};

( but you would have to change its signature to const Input = ({label, placeholder}) => { )

---

Or if you use it as a function, directly render the variable

const App = () => {
  const InputDrop = input("label", "placeholder");
  return (
    <div>
      {InputDrop}
    </div>
  );
};

Although for this case, it does not make much sense to use this approach.

Answer 3

Try the below approach

Input Component

import React from "react";

const Input = ({label, placeholder}) => 
      <label htmlFor={label}>
      {label}
      <input type="text" placeholder={placeholder} />
    </label>

export default Input;

index.js

import React from "react";
import ReactDOM from "react-dom";
import input from "./components/Input.jsx";

const App = () => 
    <div>
      <Input label="label" placeholder="placeholder" />
    </div>

export default App;

ReactDOM.render(<App />, document.getElementById("root"));