CODEWITHSUNDEEP
javascriptreactjscomponents
ida nicole herbert
ida nicole herbert

Reputation: 160

Isolating components from integrated app code in React

I'm looking for help isolating out components from my body of code. I can't figure out how to link the input and output variables that are currently integrated throughout the app code. I've tried pulling out short parts of rendered html(/jsx) and helper functions, but so far no luck. (this is a requirement for a training program.)

My approach has been to cut and paste the desired segment into a new javascript file, replace in the app function with a component call to the new js file (via exporting from component, importing in app), replace the object variable in the component with a simple abstract name (e.g., change "task" to "object") and establish equivilancies in the component call. However, I can't get this to work -- when I remove the original variables and replace with component calls, everything else stops recognizing their variables.

So I'm looking for advice and help on how to make components of the sections detailed below. Sorry if this is vague without the specific error messages and an entire detailing of my approaches so far -- I figure there is something I'm fundamentally missing about how to isolate components from the code I currently have -- All the information I've found that should be relevant relies on props to be attached to property variables in the app component, which is not how I have my app coded. I'm hoping I don't have to gut my code and start over.

To begin with, this is the smallest contained code, the basic content of the html:

//ListItem
<li
   key={listItem.index}
   onClick={() => {
      handleClick(listItem.index);
   }}
> {listItem.string}
</li>

after that would be its container element:

//Div
<div>
  <h2>w/e</h2>
  <ul>
    {list
      .map((item, index) => ({ ...item, index }))
      .filter((item) => item.position === "right")
      .map((listItem) => (
        <ListItem props.../> // the ListItem component defined before
     ))}
  </ul>
</div>

so that finally, i would have:

<body><Div props... /></body>

the last thing I'm trying to seperate as a component is an object array being used to set state via useState:

//Tasks
//const [list, setList] = useState(
  [
    { string: "string", position: "position" } //and many more
  ]);

Upvotes: 0

Views: 599

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42170

For each piece of the code that you extract, ask yourself "what information does this code need to render?" The answer to that question becomes your props. A ListItem needs key, onClick, and its contents. You can pass the contents as a string property, or you can make use of props.children.

Not every single JSX element needs to be its own component. Think about which chunks of code change depending on the variables of your app. Those variables become props and those code chunks become components.

Upvotes: 1

Related Questions