Cannot render list created in one component in another-CodePudding

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;

CodePudding user response：

The issue is that you're calling FinancialResume in your button's onClick handler, but it doesn't actually render the component.

To render the FinancialResume component and pass in the updated title state, you need to use it within the JSX returned by the parent component.

Try this instead:

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

This way, whenever the title state updates, the FinancialResume component will be re-rendered with the new title props.

CodePudding user response：

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>
  );
}

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.