✅ – ✅ – Alforoan – 19-31 Jan 2
how do u find a length of a list made by filter inside a component?
Solution:Jump to 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
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 ityea
i did and have this line
but thats not working as intended
i also tried Completed.isCompleted === true ? "Completed" : ""
but i feel like im missing something here
What is inside
Completed
variable?
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
Oh, so
Completed
is a componentyea
So
length
refers to it's arguments length and not what you are trying to read 😛right
So
isCompleted
is a prop of each item of tasks
array, which is passed to Completed
component?yes
this is from Tasks.js file
Completed component is in Completed.js file
i have the repo if that'd be better
So you can import that
tasks
array in your target place without worrying about that Completed
function, right?right
https://gyazo.com/402cb85321017df6fb758c95dd0e5259 example of how it works
Gyazo
Gyazo
except I want the 'completed' text to only appear if the task.title is crossed out
Is that array being mutated by external code? Or updated status is kept locally somewhere?
If it's mutating, then importing should do it
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
Are these components related anyhow?
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
So there is
Tasks
component, which renders Completed
component. And where do you want to read that isCompleted
state?in Tasks.js
And
tasks
array is passed from Tasks
(parent) component to Completed
(child) component?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
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
ok
💀
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
CodeSandbox
optimistic-williamson-g5i8u8 - CodeSandbox
optimistic-williamson-g5i8u8 using react, react-dom, react-icons, react-router-dom, react-scripts
wait do i have to fork it
Alforoan
CodeSandbox
inspiring-pare-830bqe - CodeSandbox
inspiring-pare-830bqe by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
idk y my component files arent saving lol
There's no
Home
component and it errorsya use the latest one
on the bottom; i made some changes
it still gives me an error
Yes, still no Home component
oh
im trolling
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
No Quotes component
thats what i see on my screen
but if i copy paste the link it jsut gives me something compeltely diff
You have to put files of these components there
ya ik but i see diff from what is outputted
But you don't have to upload whole app - just files needed to reproduce your current problem
i just copy sandbox link right?
@ScriptyChris ok i finally figured it out
Alforoan
CodeSandbox
sad-kate-g4zdbg - CodeSandbox
sad-kate-g4zdbg by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
but that still gives me an error
Error indicates you should use
<Routes>
inside <Router>
isnt this correct
thats exactly how i have it set up in my vsc
anmd it works
Check if sandbox has same dependencies versions as you have in your project
Regarding your problem, shouldn't you do
instead of
tasks is undefined cuz its in a different file
list
?You pass
list
as tasks
proptasks is in List.js and Completed.js
oh right
Yes, but you pass
list
there
So you can check list.some(({isCompleted}) => isCompleted)
omfg
that worked
Awesome
holy shit
thank you
You may react with ✅ to helpful answer to mark this thread as solved
@ScriptyChris one last question related to the code.
{ isCompleted } is the same as task.isCompleted?
ok thank u
ok did i do the checkmark correctly?
I can't see any checkmark
Solution
If you would do it correctly, then server bot would take an action and post some feedback here
hm ok
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 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