I used to get confused on how to use a component and function and because I didn't understand, i would get a bunch of errors. Hopefully, with these notes, I won't make too many errors.

As Component

  1. Pass props <Example value={thisvalue}>
  2. No curly brackets when importing
  3. use the <Example> to call the component
  4. Use export default
  5. you can use hooks like  useState, useEffect
  6. You cannot pass state: For example <Example myState={myState}> - The state will not work in the component

App.jsx:

import  GenerateField  from "../../components/utilities/GenerateField"

 

<GenerateField setuploadFiles = {setuploadFiles} />

GenerateFields.jsx:

function GenerateField (props) {
let setuploadFiles = props.setuploadFiles;
setuploadFiles = setuploadFiles + 1; // do something
return (<>{setuploadFiles}</>)
}
 
export default GenerateField

As Function

  1. Pass parameters, not props {Example(thisvalue)}
  2. Yes curly brackets when importing
  3. use the Example(param) to call the component
  4. export function (no default needed)
  5. you can NOT use hooks like useState, useEffect inside the function
  6. You can pass state. For example <Example myState={myState}> - The state will update in the parent component that called the function

App.jsx

import {GenerateField}  from "../../components/utilities/GenerateField"

 

return (
{GenerateField(message)}
)

GenerateFields.jsx

export function GenerateField (message) {
return (
<h1>{message} </h1>
)
}