Hi everyone!
Recently, I have been working on a Meme Project with ReactJs as the Frontend. It is basically a simple app that lets users make memes fast and effectively. Until, I woke up yesterday with a very weird problem. VS Code indicates that there is a problem with using Props in the Components. Which, I have been trying to resolve since yesterday Unfurtunately, It’s decreasing my productivity.
Even AI could not handle the problem.
Problem 1: Props in all Components have red lines under them.
- Example line: Line 12 in Oome Component
function Oome ({savedMemes, setSavedMemes}) {...}
Problem 2: Props are not working as expected and have red line under each.
- Example line: Line 106 in TextInput Component
{(memeText.status.top.isMoreOn) && <p>more is on</p>}
Note: Typos in the code are intentional. Because my keyboard has missing letters. 🙂
Debugging Attempts:
- Using Props: I used the props instead of calling the property directly
- Simplifying: I simplify the code. Hopping that the problem comes from its complication.
Unfortunatly, both ways did not change in the problem.
Code below has {/* Code With Problem */} over the lines mentioned under each previous problem in the post.
Current Code:
import{ useEffect, useState } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Pages/Home/Oome";
import UserMemes from "./Pages/UserMemes/UserMemes";
const App = () => {
const {savedMemes, setSavedMemes } = useState([]);
useEffect(() => {
console.log(savedMemes)
}, [savedMemes])
return (
<Router>
<Routes>
<Route
path="/"
element={
<Home savedMemes={savedMemes} setSavedMemes={setSavedMemes}
/>
}
/>
<Route path="/jallary" element={<UserMemes savedMemes={savedMemes} setSavedMemes={setSavedMemes} />} />
</Routes>
</Router>
);
};
export default App;
import { useEffect, useState , useRef} from "react";
import "./Oome.css";
import Navbar from "../../Components/NavBar/Navbar";
import BottomeNavBar from "../../Components/BottomNavBar/BottomNavBar";
import Preview from "../../Components/Preview/Preview";
import TextInput from "../../Components/TextInput/TextInput";
import html2canvas from "html2canvas";
import { Download } from "../../Components/Download/Download";
import { GetMemeButton } from "../../Components/GetMemeButton/GetMemeButton";
{/* Code With Problem */}
function Oome ({savedMemes, setSavedMemes}) {
const [selectedFile, setSelectedFile] = useState(``);
const imeRef = useRef()
function andleDownload() {
html2canvas(imeRef.current, { useCORS: true }).then((canvas) => {
const link = document.createElement("a");
link.href = canvas.toDataURL("image/png");
link.download = "download.png";
link.click();
});
}
const [memeText, setMemeText] = useState({
top: {
topText: ``,
color: ``,
},
bottom: {
bottomText: ``,
color: ``,
},
imae: {
data: null,
},
status : {
date: null,
top: {
isMoreOn: false
},
bottom: {
isMoreOn: false
}
}
});
useEffect(() => {
if (selectedFile) {
setMemeText((prevMemeText) => ({
...prevMemeText,
imae: {
data: selectedFile,
},
status : {
date: new Date().getHours(),
top: {
isMoreOn: false,
},
bottom: {
isMoreOn: false,
}
}
}));
}
// savedMemes()
}, [selectedFile]);
return (
<div className="oome-container">
<Navbar setSelectedFile={setSelectedFile} />
<Preview
selectedFile={selectedFile}
memeText={memeText}
savedMemes={savedMemes}
imeRef={imeRef}
/>
<TextInput
memeText={memeText}
setMemeText={setMemeText}
setSavedMemes={setSavedMemes}
savedMemes={savedMemes}
andleDownload={andleDownload}
/>
<Download andleDownload={andleDownload}/>
<GetMemeButton />
<BottomeNavBar />
</div>
);
};
export default Oome;
import { useState } from 'react';
import './TextInput.css';
const TextInput = ({setMemeText, memeText, setSavedMemes, savedMemes}) => {
function andleTopText(event) {
const topText = event.target.value
console.log(topText)
setMemeText(prevMemeText => (
{
...prevMemeText,
top : {
...prevMemeText.top,
topText: topText,
}
}
))
}
function andleTopColor(event) {
const topColor = event.target.value
console.log(topColor)
setMemeText(prevMemeText => (
{
...prevMemeText,
top : {
...prevMemeText.top,
color: topColor
}
}
))
}
function andleBottomText(event) {
const bottomText = event.target.value
console.log(bottomText)
setMemeText(prevMemeText => (
{
...prevMemeText,
bottom : {
...prevMemeText.top,
bottomText:bottomText
}
}
))
}
function andleBottomColor(event) {
const bottomColor = event.target.value
console.log(bottomColor)
setMemeText(prevMemeText => (
{
...prevMemeText,
bottom : {
...prevMemeText.top,
color: bottomColor
}
}
))
}
function andleSaveMeme() {
setSavedMemes(prevSavedMemes => ([
...prevSavedMemes,
memeText
]))
console.log(`savedMemes: `, savedMemes)
}
const [isMoreOn, setIsMoreOn] = useState(false)
function andleMoreClick(position) {
setIsMoreOn((prev) => !prev)
setMemeText((prev) => ({
...prev,
status: {
...status,
[position]: isMoreOn
}
})
)
}
return (
<div className='text-input--container'>
<label className='label'>
Setup:
<textarea type='text'
placeholder='Meme Setup'
onChange={(event) => andleTopText(event)}
/>
<input type='color'
onChange={(event) => andleTopColor(event)}
/>
<button
onClick={() => andleMoreClick('top')}
>More</button>
{/* Code With Problem */}
{(memeText.status.top.isMoreOn) && <p>more is on</p>}
</label>
<label className='label'>
Punchline:
<textarea type='text'
placeholder='Meme Punchline'
onChange={(event) => andleBottomText(event)}
/>
<input type='color'
onChange={(event) => andleBottomColor(event)}
className='red'
/>
</label>
<button
onClick={andleSaveMeme}
>Save in gallery</button>
</div>
)
}
export default TextInput
Any help would be greatly appreciated! I’m looking for suggestions on how to resolve the issues with props or if there are common mistakes I might have overlooked. Thank you!
