help-threads-react

✅ – ✅ – Alforoan – 19-31 Jan 2

AAlforoan

1/2/2023

how do u find a length of a list made by filter inside a component?

Solution:

If you would do it correctly, then server bot would take an action and post some feedback here

Jump to solution

AAlforoan

1/2/2023

what im trying to do for context: i want 'Completed' text to only appear if i have the task completed (isCompleted = true) but idk how to access isCompleted variable because the Completed function is in a different file

SScriptyChris

1/2/2023

So you only need to call that function from other file to get that value? export it from the other file and import to the one you need it

AAlforoan

1/2/2023

yea i did and have this line

<div>
          <h2>{Completed.length > 0 ? "Completed" : ""}</h2>
        </div>

<div>
          <h2>{Completed.length > 0 ? "Completed" : ""}</h2>
        </div>

but thats not working as intended i also tried Completed.isCompleted === true ? "Completed" : "" but i feel like im missing something here

SScriptyChris

1/2/2023

What is inside Completed variable?

AAlforoan

1/2/2023

function Completed({
  tasks,
  removeTask,

  importantTask,
  completeTask,
}) {
  return (
    <div>
      {tasks
        .filter((task) => task.isCompleted === true)
        .map((task) => {
          const { id, title, isImportant, isCompleted } = task;

          return (
            <article key={id}>
              <p
                onClick={() => completeTask(id)}
                className={isCompleted ? "title-completed" : "title"}
              >
                {title}
              </p>

              <div className="btn-container">
                <button className="delete" onClick={() => removeTask(id)}>
                  <FaTrash className="delete-icon" />
                </button>
                <button className="star" onClick={() => importantTask(id)}>
                  {isImportant ? (
                    <FaStar className="star-icon" />
                  ) : (
                    <FaRegStar className="star-icon" />
                  )}
                </button>
              </div>
            </article>
          );
        })}
    </div>
  );
}

function Completed({
  tasks,
  removeTask,

  importantTask,
  completeTask,
}) {
  return (
    <div>
      {tasks
        .filter((task) => task.isCompleted === true)
        .map((task) => {
          const { id, title, isImportant, isCompleted } = task;

          return (
            <article key={id}>
              <p
                onClick={() => completeTask(id)}
                className={isCompleted ? "title-completed" : "title"}
              >
                {title}
              </p>

              <div className="btn-container">
                <button className="delete" onClick={() => removeTask(id)}>
                  <FaTrash className="delete-icon" />
                </button>
                <button className="star" onClick={() => importantTask(id)}>
                  {isImportant ? (
                    <FaStar className="star-icon" />
                  ) : (
                    <FaRegStar className="star-icon" />
                  )}
                </button>
              </div>
            </article>
          );
        })}
    </div>
  );
}

i was thinking about giving the array a name cuz i thought Completed.length didnt make much sense, but since it was so long i didnt know what to do

SScriptyChris

1/2/2023

Oh, so Completed is a component

AAlforoan

1/2/2023

yea

SScriptyChris

1/2/2023

So lengthrefers to it's arguments length and not what you are trying to read 😛

AAlforoan

1/2/2023

right

SScriptyChris

1/2/2023

So isCompleted is a prop of each item of tasks array, which is passed to Completed component?

AAlforoan

1/2/2023

yes

const newTask = {
        id: new Date().getTime().toString(),
        title: message,
        isImportant: false,
        isCompleted: false,
      };

const newTask = {
        id: new Date().getTime().toString(),
        title: message,
        isImportant: false,
        isCompleted: false,
      };

this is from Tasks.js file Completed component is in Completed.js file i have the repo if that'd be better

SScriptyChris

1/2/2023

So you can import that tasks array in your target place without worrying about that Completed function, right?

AAlforoan

1/2/2023

right https://gyazo.com/402cb85321017df6fb758c95dd0e5259 example of how it works except I want the 'completed' text to only appear if the task.title is crossed out

SScriptyChris

1/2/2023

Is that array being mutated by external code? Or updated status is kept locally somewhere? If it's mutating, then importing should do it

AAlforoan

1/2/2023

array only changes if i click on the trashcan cuz that just deletes that specific item updated list should still be in Tasks.js which that gyazo shows i am using react router dom if thats relevant

SScriptyChris

1/2/2023

Are these components related anyhow?

AAlforoan

1/2/2023

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/quotes" element={<Quotes />} />
        <Route path="/important" element={<Important />} />
        <Route path="/tasks" element={<Tasks />} />
      </Routes>
    </>
  );
}

export default App;

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/quotes" element={<Quotes />} />
        <Route path="/important" element={<Important />} />
        <Route path="/tasks" element={<Tasks />} />
      </Routes>
    </>
  );
}

export default App;

my App.js file well i'm using Completed component in Tasks.js I have a separate file called List.js which renders the task once i type it out

SScriptyChris

1/2/2023

So there is Tasks component, which renders Completed component. And where do you want to read that isCompleted state?

AAlforoan

1/2/2023

in Tasks.js

SScriptyChris

1/2/2023

And tasks array is passed from Tasks (parent) component to Completed (child) component?

AAlforoan

1/2/2023

i dont think. because i have a separate file called List.js which renders the tasks once i type it out i render List.js in Tasks.js Completed.js is the same as List.js except i filter out the ones where task.isCompleted = true so essentially i have two List.js except one is above the other

SScriptyChris

1/2/2023

Can you share it via https://codesandbox.io ?

AAlforoan

1/2/2023

AAlforoan

1/2/2023

AAlforoan

1/2/2023

💀 do u use github wait nvm i can fix it @ScriptyChris idk how to fix this error https://codesandbox.io/s/optimistic-williamson-g5i8u8?file=/src/App.js wait do i have to fork it https://codesandbox.io/s/inspiring-pare-830bqe?file=/src/App.js idk y my component files arent saving lol

SScriptyChris

1/2/2023

There's no Home component and it errors

AAlforoan

1/2/2023

ya use the latest one on the bottom; i made some changes it still gives me an error

SScriptyChris

1/2/2023

Yes, still no Home component

AAlforoan

1/2/2023

oh im trolling https://codesandbox.io/s/quizzical-christian-si86z6?file=/src/App.js this still gives me an error tho not sure why

SScriptyChris

1/2/2023

No Quotes component

AAlforoan

1/2/2023

AAlforoan

1/2/2023

thats what i see on my screen but if i copy paste the link it jsut gives me something compeltely diff

SScriptyChris

1/2/2023

You have to put files of these components there

AAlforoan

1/2/2023

ya ik but i see diff from what is outputted

SScriptyChris

1/2/2023

But you don't have to upload whole app - just files needed to reproduce your current problem

AAlforoan

1/2/2023

i just copy sandbox link right? @ScriptyChris ok i finally figured it out https://codesandbox.io/s/sad-kate-g4zdbg?file=/src/App.js but that still gives me an error

SScriptyChris

1/2/2023

Error indicates you should use <Routes> inside <Router>

AAlforoan

1/2/2023

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tasks" element={<Tasks />} />
      </Routes>
    </>
  );
}

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/tasks" element={<Tasks />} />
      </Routes>
    </>
  );
}

isnt this correct thats exactly how i have it set up in my vsc anmd it works

SScriptyChris

1/2/2023

Check if sandbox has same dependencies versions as you have in your project Regarding your problem, shouldn't you do

<h2>{tasks.some(({isCompleted}) => isCompleted) ? "Completed" : ""}</h2>

<h2>{tasks.some(({isCompleted}) => isCompleted) ? "Completed" : ""}</h2>

instead of

<h2>{Completed.length > 0 ? "Completed" : ""}</h2>

<h2>{Completed.length > 0 ? "Completed" : ""}</h2>

AAlforoan

1/2/2023

AAlforoan

1/2/2023

tasks is undefined cuz its in a different file

SScriptyChris

1/2/2023

list?

SScriptyChris

1/2/2023

You pass list as tasks prop

AAlforoan

1/2/2023

tasks is in List.js and Completed.js oh right

SScriptyChris

1/2/2023

Yes, but you pass list there So you can check list.some(({isCompleted}) => isCompleted)

AAlforoan

1/2/2023

omfg that worked

SScriptyChris

1/2/2023

Awesome

AAlforoan

1/2/2023

holy shit thank you

SScriptyChris

1/2/2023

You may react with ✅ to helpful answer to mark this thread as solved

AAlforoan

1/2/2023

@ScriptyChris one last question related to the code. { isCompleted } is the same as task.isCompleted?

SScriptyChris

1/2/2023

Yes, it's just destructured https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

AAlforoan

1/2/2023

ok thank u

SScriptyChris

1/2/2023

Actually it's this docs'es paragraph https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#unpacking_properties_from_objects_passed_as_a_function_parameter

AAlforoan

1/2/2023

ok did i do the checkmark correctly?

SScriptyChris

1/2/2023

I can't see any checkmark

Solution

SScriptyChris

1/2/2023

If you would do it correctly, then server bot would take an action and post some feedback here

AAlforoan

1/2/2023

hm ok

UUUnknown User

1/3/2023

4 Messages Not Public

Looking for more? Join the community!

help-threads-react

help-threads-react

Want results from more Discord servers?

Add your server