✅ – ✅ – 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

ScriptyChris•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

Are these components related anyhow?

Alforoan•2y ago

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

ScriptyChris•2y ago

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

Alforoan•2y ago

in Tasks.js

ScriptyChris•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

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

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster

Alforoan•2y ago

Alforoan•2y ago

💀 do u use github wait nvm i can fix it

Alforoan•2y ago

@ScriptyChris idk how to fix this error https://codesandbox.io/s/optimistic-williamson-g5i8u8?file=/src/App.js

CodeSandbox

optimistic-williamson-g5i8u8 - CodeSandbox

optimistic-williamson-g5i8u8 using react, react-dom, react-icons, react-router-dom, react-scripts

Alforoan•2y ago

wait do i have to fork it

Alforoan•2y ago

https://codesandbox.io/s/inspiring-pare-830bqe?file=/src/App.js

Alforoan

CodeSandbox

inspiring-pare-830bqe - CodeSandbox

inspiring-pare-830bqe by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts

Alforoan•2y ago

idk y my component files arent saving lol

ScriptyChris•2y ago

There's no Home component and it errors

Alforoan•2y ago

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

ScriptyChris•2y ago

Yes, still no Home component

Alforoan•2y ago

oh im trolling

Alforoan•2y ago

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

Alforoan

CodeSandbox

quizzical-christian-si86z6 - CodeSandbox

quizzical-christian-si86z6 by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts

ScriptyChris•2y ago

No Quotes component

Alforoan•2y ago

Alforoan•2y ago

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

ScriptyChris•2y ago

You have to put files of these components there

Alforoan•2y ago

ya ik but i see diff from what is outputted

ScriptyChris•2y ago

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

Alforoan•2y ago

i just copy sandbox link right? @ScriptyChris ok i finally figured it out

Alforoan•2y ago

https://codesandbox.io/s/sad-kate-g4zdbg?file=/src/App.js

Alforoan

CodeSandbox

sad-kate-g4zdbg - CodeSandbox

sad-kate-g4zdbg by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts

Alforoan•2y ago

but that still gives me an error

ScriptyChris•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

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>

Alforoan•2y ago

Alforoan•2y ago

tasks is undefined cuz its in a different file

ScriptyChris•2y ago

list?

ScriptyChris•2y ago

You pass list as tasks prop

Alforoan•2y ago

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

ScriptyChris•2y ago

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

Alforoan•2y ago

omfg that worked

ScriptyChris•2y ago

Awesome

Alforoan•2y ago

holy shit thank you

ScriptyChris•2y ago

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

Alforoan•2y ago

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

ScriptyChris•2y ago

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

Alforoan•2y ago

ok thank u

ScriptyChris•2y ago

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

Alforoan•2y ago

ok did i do the checkmark correctly?

ScriptyChris•2y ago

I can't see any checkmark

Solution

ScriptyChris•2y ago

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

Alforoan•2y ago

hm ok

reactibot•2y ago

This question has an answer! Thank you for helping 😄 If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1059554509006843936 This thread hasn’t had any activity in 12 hours, so it’s now locked. Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/902647189120118794/1059554509006843936