✅ – ✅ – 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
A
Alforoan472d 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
S
ScriptyChris472d 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
A
Alforoan472d 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
S
ScriptyChris472d ago
What is inside Completed variable?
A
Alforoan472d 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
S
ScriptyChris472d ago
Oh, so Completed is a component
A
Alforoan472d ago
yea
S
ScriptyChris472d ago
So lengthrefers to it's arguments length and not what you are trying to read 😛
A
Alforoan472d ago
right
S
ScriptyChris472d ago
So isCompleted is a prop of each item of tasks array, which is passed to Completed component?
A
Alforoan472d 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
S
ScriptyChris472d ago
So you can import that tasks array in your target place without worrying about that Completed function, right?
A
Alforoan472d ago
right
A
Alforoan472d ago
A
Alforoan472d ago
except I want the 'completed' text to only appear if the task.title is crossed out
S
ScriptyChris472d 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
A
Alforoan472d 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
S
ScriptyChris472d ago
Are these components related anyhow?
A
Alforoan472d 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
S
ScriptyChris472d ago
So there is Tasks component, which renders Completed component. And where do you want to read that isCompleted state?
A
Alforoan472d ago
in Tasks.js
S
ScriptyChris472d ago
And tasks array is passed from Tasks (parent) component to Completed (child) component?
A
Alforoan472d 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
S
ScriptyChris472d 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
A
Alforoan472d ago
ok
A
Alforoan472d ago
A
Alforoan472d ago
💀 do u use github wait nvm i can fix it
A
Alforoan472d ago
CodeSandbox
optimistic-williamson-g5i8u8 - CodeSandbox
optimistic-williamson-g5i8u8 using react, react-dom, react-icons, react-router-dom, react-scripts
A
Alforoan472d ago
wait do i have to fork it
A
Alforoan472d ago
Alforoan
CodeSandbox
inspiring-pare-830bqe - CodeSandbox
inspiring-pare-830bqe by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
A
Alforoan472d ago
idk y my component files arent saving lol
S
ScriptyChris472d ago
There's no Home component and it errors
A
Alforoan472d ago
ya use the latest one on the bottom; i made some changes it still gives me an error
S
ScriptyChris472d ago
Yes, still no Home component
A
Alforoan472d ago
oh im trolling
A
Alforoan472d 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
S
ScriptyChris472d ago
No Quotes component
A
Alforoan472d ago
A
Alforoan472d ago
thats what i see on my screen but if i copy paste the link it jsut gives me something compeltely diff
S
ScriptyChris472d ago
You have to put files of these components there
A
Alforoan472d ago
ya ik but i see diff from what is outputted
S
ScriptyChris472d ago
But you don't have to upload whole app - just files needed to reproduce your current problem
A
Alforoan472d ago
i just copy sandbox link right? @ScriptyChris ok i finally figured it out
A
Alforoan472d ago
Alforoan
CodeSandbox
sad-kate-g4zdbg - CodeSandbox
sad-kate-g4zdbg by Alforoan using react, react-dom, react-icons, react-router-dom, react-scripts
A
Alforoan472d ago
but that still gives me an error
S
ScriptyChris472d ago
Error indicates you should use <Routes> inside <Router>
A
Alforoan472d 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
S
ScriptyChris472d 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>
A
Alforoan472d ago
A
Alforoan472d ago
tasks is undefined cuz its in a different file
S
ScriptyChris472d ago
list?
S
ScriptyChris472d ago
You pass list as tasks prop
A
Alforoan472d ago
tasks is in List.js and Completed.js oh right
S
ScriptyChris472d ago
Yes, but you pass list there So you can check list.some(({isCompleted}) => isCompleted)
A
Alforoan472d ago
omfg that worked
S
ScriptyChris472d ago
Awesome
A
Alforoan472d ago
holy shit thank you
S
ScriptyChris472d ago
You may react with ✅ to helpful answer to mark this thread as solved
A
Alforoan472d ago
@ScriptyChris one last question related to the code. { isCompleted } is the same as task.isCompleted?
A
Alforoan472d ago
ok thank u
A
Alforoan472d ago
ok did i do the checkmark correctly?
S
ScriptyChris472d ago
I can't see any checkmark
Solution
S
ScriptyChris472d ago
If you would do it correctly, then server bot would take an action and post some feedback here
A
Alforoan472d ago
hm ok
UU
Unknown User471d ago
More Posts
bfrisco – 00-42 Jan 1Is there a purpose of what I am dubbing as "blanket brackets" within functions? Example: ```js await✅ – Sorrow – 21-59 Dec 30Hi, I'm following this tutorial (https://reactjs.org/tutorial/tutorial.html#showing-the-past-moves) Box Element causing overflows on smaller screens, even though it does not reach the end of screenI am using Material UI with React and Webpack On smaller screens my react box component makes the sc✅ – _mercury – 21-33 Dec 30I had many instances of divs that each contains an input they are generated dynamically I want ant✅ – Script – 23-31 Dec 29how can I conditionally render `checked` in this radio input `<input type="radio" checked />`Alex. – 09-19 Dec 29I need to replace the url using regex, current url : `http://localhost:3000/#/test/id/123456&gid=1&pNext-steps scaling up and expandingHey guys, so I wanted your opinion and seek some guidance on how to proceed with this *issue* For so✅ – mzeeshan – 14-02 Dec 28hello there..... RegExp Question.... i'm beginner in RegExp. i have a variable `search` that contaiCannot display table using ReactHi, I am trying to display a simple table but it is showing me error. Been stuck on this for two we✅ – Perke – 18-27 Dec 26For every 13 objects id like to get an object like {size: "7", asks: [200,220,250]} so basically siz✅ – _mercury – 21-58 Dec 25what could by the reason that this func sends 2 reqs ? ```js async saveProduct(cartoon) { mzeeshan – 18-54 Dec 25hello there... Question..... what is the meaning of `line 4` , i mean why there is `, e` .......? ``