✅ – ✅ – Alforoan – 19-31 Jan 2

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

68 Replies

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•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

What is inside Completed variable?

Alforoan•2y ago

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

ScriptyChris•2y ago

Oh, so Completed is a component

Alforoan•2y ago

yea

ScriptyChris•2y ago

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

Alforoan•2y ago

right

ScriptyChris•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

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

Alforoan•2y ago

right

Alforoan•2y ago

https://gyazo.com/402cb85321017df6fb758c95dd0e5259 example of how it works

Gyazo

Alforoan•2y ago

except I want the 'completed' text to only appear if the task.title is crossed out