CODEWITHSUNDEEP
javascriptreactjs
newuser12333
newuser12333

Reputation: 1

Cannot render list created in one component in another

Ok. I have the app.js (which will render all components on my screen) and inside this file i embeded two other js files (components). The first one is basically a button that adds one more word to an array. It goes something like this:

import { useState } from "react";

function DescriptionSector() {
  const [title, setTitle] = useState([]);
  return (
    <button onClick={() => setTitle([...title, "New title defined"])}>add word</button>

)

This first component is working just fine as I used console.log to test it.

THe problem is with the second part. The second part consists basically of a list that renders the array create on the first part and here's where i having trouble.

function FinancialResume({ title }) {
  return (

    <ul>

      {title.map(e => {
      return (
        <li>{e}</li>
        
      )
    })}

    </ul>


  )

}

I tried using the props object to send the updated array like this:

import { useState } from "react";

function DescriptionSector() {
  const [title, setTitle] = useState([]);
  return (
     <button
        onClick={() => {
          setTitle([...title, "New title defined"]);
          FinancialResume(title);
        }}
      >
        add word
      </button>

)

BUT IT DIDNT WORKED

EDIT: here's my app.js


import DescriptionSector from "./Components/descriptionSector/description";
import FinancialResume from "./Components/financialresume/financialresume";

function App() {
  return (
    <div className="App">
      
      <div className="user-body__leftSector">
        <DescriptionSector />        
      </div>

      <div className="user-body__rightSector">
        <FinancialResume />
      </div>
    </div>

)}
            
export default App;

Upvotes: 0

Views: 68

Answers (1)

Phil
Phil

Reputation: 164776

Assuming you want the changes made in DescriptionSector to be rendered by FinancialResume, one way you can do that with React is by passing props from a shared parent.

Let App control the title state. It can pass the setter down to DescriptionSector and the value down to FinancialResume.

React states are reactive to changes. App and FinancialResume will re-render when title changes without you having to call any functions.

function App() {
  const [title, setTitle] = useState([]);

  return (
    <div className="App">
      <div className="user-body__leftSector">
        <DescriptionSector setTitle={setTitle} />
      </div>

      <div className="user-body__rightSector">
        <FinancialResume title={title} />
      </div>
    </div>
  );
}

function DescriptionSector({ setTitle }) {
  return (
    <button
      onClick={() => {
        setTitle((title) => [...title, "New title defined"]);
      }}
    >
      add word
    </button>
  );
}

function FinancialResume({ title }) {
  return (
    <ul>
      {title.map((e, i) => {
        return <li key={i}>{e}</li>;
      })}
    </ul>
  );
}

Edit young-tdd-k6ttf5

There are of course other ways to manage shared state such as Context and state stores like Redux Toolkit but those are more advanced topics.

Upvotes: 2

Related Questions