Alforoan
Alforoan2y ago

✅ – ✅ – 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
Jump to solution
68 Replies
Alforoan
AlforoanOP2y ago
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
ScriptyChris2y 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
AlforoanOP2y 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
ScriptyChris2y ago
What is inside Completed variable?
Alforoan
AlforoanOP2y 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
ScriptyChris2y ago
Oh, so Completed is a component
Alforoan
AlforoanOP2y ago
yea
ScriptyChris
ScriptyChris2y ago
So lengthrefers to it's arguments length and not what you are trying to read 😛
Alforoan
AlforoanOP2y ago
right
ScriptyChris
ScriptyChris2y ago
So isCompleted is a prop of each item of tasks array, which is passed to Completed component?
Alforoan
AlforoanOP2y 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
ScriptyChris2y ago
So you can import that tasks array in your target place without worrying about that Completed function, right?
Alforoan
AlforoanOP2y ago
right
Alforoan
AlforoanOP2y ago
except I want the 'completed' text to only appear if the task.title is crossed out
ScriptyChris
ScriptyChris2y 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
AlforoanOP2y 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
ScriptyChris2y ago
Are these components related anyhow?
Alforoan
AlforoanOP2y 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
ScriptyChris2y ago
So there is Tasks component, which renders Completed component. And where do you want to read that isCompleted state?
Alforoan
AlforoanOP2y ago
in Tasks.js
ScriptyChris
ScriptyChris2y ago
And tasks array is passed from Tasks (parent) component to Completed (child) component?
Alforoan
AlforoanOP2y 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
ScriptyChris2y 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
AlforoanOP2y ago
ok
Alforoan
AlforoanOP2y ago
Alforoan
AlforoanOP2y ago
💀 do u use github wait nvm i can fix it
Alforoan
AlforoanOP2y ago
CodeSandbox
optimistic-williamson-g5i8u8 - CodeSandbox
optimistic-williamson-g5i8u8 using react, react-dom, react-icons, react-router-dom, react-scripts
Alforoan
AlforoanOP2y ago
wait do i have to fork it
Alforoan
AlforoanOP2y ago
Alforoan
CodeSandbox
inspiring-pare-830bqe - CodeSandbox
inspiring-pare-830bqe by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
Alforoan
AlforoanOP2y ago
idk y my component files arent saving lol
ScriptyChris
ScriptyChris2y ago
There's no Home component and it errors
Alforoan
AlforoanOP2y ago
ya use the latest one on the bottom; i made some changes it still gives me an error
ScriptyChris
ScriptyChris2y ago
Yes, still no Home component
Alforoan
AlforoanOP2y ago
oh im trolling
Alforoan
AlforoanOP2y 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
ScriptyChris2y ago
No Quotes component
Alforoan
AlforoanOP2y ago
Alforoan
AlforoanOP2y ago
thats what i see on my screen but if i copy paste the link it jsut gives me something compeltely diff
ScriptyChris
ScriptyChris2y ago
You have to put files of these components there
Alforoan
AlforoanOP2y ago
ya ik but i see diff from what is outputted
ScriptyChris
ScriptyChris2y ago
But you don't have to upload whole app - just files needed to reproduce your current problem
Alforoan
AlforoanOP2y ago
i just copy sandbox link right? @ScriptyChris ok i finally figured it out
Alforoan
AlforoanOP2y ago
Alforoan
CodeSandbox
sad-kate-g4zdbg - CodeSandbox
sad-kate-g4zdbg by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
Alforoan
AlforoanOP2y ago
but that still gives me an error
ScriptyChris
ScriptyChris2y ago
Error indicates you should use <Routes> inside <Router>
Alforoan
AlforoanOP2y 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
ScriptyChris2y 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
AlforoanOP2y ago
Alforoan
AlforoanOP2y ago
tasks is undefined cuz its in a different file
ScriptyChris
ScriptyChris2y ago
list?
ScriptyChris
ScriptyChris2y ago
You pass list as tasks prop
Alforoan
AlforoanOP2y ago
tasks is in List.js and Completed.js oh right
ScriptyChris
ScriptyChris2y ago
Yes, but you pass list there So you can check list.some(({isCompleted}) => isCompleted)
Alforoan
AlforoanOP2y ago
omfg that worked
ScriptyChris
ScriptyChris2y ago
Awesome
Alforoan
AlforoanOP2y ago
holy shit thank you
ScriptyChris
ScriptyChris2y ago
You may react with ✅ to helpful answer to mark this thread as solved
Alforoan
AlforoanOP2y ago
@ScriptyChris one last question related to the code. { isCompleted } is the same as task.isCompleted?
Alforoan
AlforoanOP2y ago
ok thank u
Alforoan
AlforoanOP2y ago
ok did i do the checkmark correctly?
ScriptyChris
ScriptyChris2y ago
I can't see any checkmark
Solution
ScriptyChris
ScriptyChris2y ago
If you would do it correctly, then server bot would take an action and post some feedback here
Alforoan
AlforoanOP2y ago
hm ok
reactibot
reactibot2y 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
reactibot
reactibot2y 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

Did you find this page helpful?