Reactiflux
Reactiflux

help-threads-react

Root Question Message

Alforoan
Alforoan1/2/2023
how do u find a length of a list made by filter inside a component?
Alforoan
Alforoan1/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
ScriptyChris
ScriptyChris1/2/2023
So you only need to call that function from other file to get that value?
ScriptyChris
ScriptyChris1/2/2023
export it from the other file and import to the one you need it
Alforoan
Alforoan1/2/2023
yea
Alforoan
Alforoan1/2/2023
i did and have this line
<div>
          <h2>{Completed.length > 0 ? "Completed" : ""}</h2>
        </div>
Alforoan
Alforoan1/2/2023
but thats not working as intended
Alforoan
Alforoan1/2/2023
i also tried Completed.isCompleted === true ? "Completed" : ""
but i feel like im missing something here
ScriptyChris
ScriptyChris1/2/2023
What is inside Completed variable?
Alforoan
Alforoan1/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>
  );
}
Alforoan
Alforoan1/2/2023
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
ScriptyChris
ScriptyChris1/2/2023
Oh, so Completed is a component
Alforoan
Alforoan1/2/2023
yea
ScriptyChris
ScriptyChris1/2/2023
So lengthrefers to it's arguments length and not what you are trying to read 😛
Alforoan
Alforoan1/2/2023
right
ScriptyChris
ScriptyChris1/2/2023
So isCompleted is a prop of each item of tasks array, which is passed to Completed component?
Alforoan
Alforoan1/2/2023
yes
Alforoan
Alforoan1/2/2023
const newTask = {
        id: new Date().getTime().toString(),
        title: message,
        isImportant: false,
        isCompleted: false,
      };
this is from Tasks.js file
Alforoan
Alforoan1/2/2023
Completed component is in Completed.js file
Alforoan
Alforoan1/2/2023
i have the repo if that'd be better
ScriptyChris
ScriptyChris1/2/2023
So you can import that tasks array in your target place without worrying about that Completed function, right?
Alforoan
Alforoan1/2/2023
right
Alforoan
Alforoan1/2/2023
Alforoan
Alforoan1/2/2023
except I want the 'completed' text to only appear if the task.title is crossed out
ScriptyChris
ScriptyChris1/2/2023
Is that array being mutated by external code? Or updated status is kept locally somewhere?
ScriptyChris
ScriptyChris1/2/2023
If it's mutating, then importing should do it
Alforoan
Alforoan1/2/2023
array only changes if i click on the trashcan cuz that just deletes that specific item
Alforoan
Alforoan1/2/2023
updated list should still be in Tasks.js
Alforoan
Alforoan1/2/2023
which that gyazo shows
Alforoan
Alforoan1/2/2023
i am using react router dom
Alforoan
Alforoan1/2/2023
if thats relevant
ScriptyChris
ScriptyChris1/2/2023
Are these components related anyhow?
Alforoan
Alforoan1/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;


my App.js file
Alforoan
Alforoan1/2/2023
well i'm using Completed component in Tasks.js
Alforoan
Alforoan1/2/2023
I have a separate file called List.js which renders the task
Alforoan
Alforoan1/2/2023
once i type it out
ScriptyChris
ScriptyChris1/2/2023
So there is Tasks component, which renders Completed component. And where do you want to read that isCompleted state?
Alforoan
Alforoan1/2/2023
in Tasks.js
ScriptyChris
ScriptyChris1/2/2023
And tasks array is passed from Tasks (parent) component to Completed (child) component?
Alforoan
Alforoan1/2/2023
i dont think. because i have a separate file called List.js which renders the tasks once i type it out
Alforoan
Alforoan1/2/2023
i render List.js in Tasks.js
Alforoan
Alforoan1/2/2023
Completed.js is the same as List.js except i filter out the ones where task.isCompleted = true
Alforoan
Alforoan1/2/2023
so essentially i have two List.js except one is above the other
ScriptyChris
ScriptyChris1/2/2023
Can you share it via https://codesandbox.io ?
Alforoan
Alforoan1/2/2023
ok
Alforoan
Alforoan1/2/2023
Alforoan
Alforoan1/2/2023
💀
Alforoan
Alforoan1/2/2023
do u use github
Alforoan
Alforoan1/2/2023
wait nvm
Alforoan
Alforoan1/2/2023
i can fix it
Alforoan
Alforoan1/2/2023
ContactFrequently Asked QuestionsJoin The DiscordBugs & Feature RequestsTerms & Privacy