How to use props.children in React for flexible components

🚀 Mastering Props in React — The Key to Reusable Components! In React, props (properties) are one of the most powerful concepts. They allow you to pass data from one component to another, making your UI dynamic, reusable, and easier to maintain. Think of props as function arguments — you send data from parent to child so the child can render content based on that data. 🔍 Why Props Matter? ✔️ Help create reusable components ✔️ Support one-way data flow ✔️ Make apps more organized and modular ✔️ Keep components dynamic and flexible 📌 Simple Example // Parent Component function App() { return ( <div> <Greeting name="Amy" /> <Greeting name="React Learner" /> </div> ); } // Child Component function Greeting(props) { return <h2>Hello, {props.name}! 👋</h2>; } 💡 Here, the App component passes different name values as props to the Greeting component — making it reusable and dynamic. 🧠 Pro Tip Use destructuring for cleaner code: function Greeting({ name }) { return <h2>Hello, {name}! 👋</h2>; } ✨ If you're learning React, understanding props is your first big step toward building powerful, component-driven UIs! #React #ReactJS #WebDevelopment #Frontend #JavaScript #LearnReact #Coding #Developers #PropsInReact #ReactTips #WomenWhoCode #CodeNewbie #Programming #TechLearning #ReactComponents #FrontendDevelopment #100DaysOfCode #SoftwareEngineering #BuildInPublic

I recently built a small project called “Recipe Finder” 🍽️ to brush up on my React skills and try out a few new things I’ve been learning. It’s a simple app where you can search for recipes by ingredient or name, or just click a button to get a random meal suggestion when you’re not sure what to cook 😋 I used React (Vite), Tailwind CSS, and TheMealDB API for this one — it really helped me strengthen my understanding of API handling, responsive UI design, and component-based development. Some of the features I implemented: ✅ Search by ingredient or recipe name (auto-detects type) ✅ Random recipe button ✅ Loading and error handling ✅ Responsive animated recipe cards ✅ Modal with ingredients, steps, and YouTube tutorial links Here’s the link if you’d like to check it out 👇 🔗 Live Project:[https://lnkd.in/gC4mFCjr] 💻 GitHub: [https://lnkd.in/gYqZZ3ts] Building small projects like this keeps me learning, experimenting, and improving a little every day. #ReactJS #TailwindCSS #WebDevelopment #LearningByDoing #ProjectShowcase

😎I recently built a React Routing Project to understand and implement core routing concepts in React. In this project, I used react-router-dom and practiced: 1. BrowserRouter Setup 2. Nested Routes 3. Dynamic Routing using useParams() 4. Navigation using useNavigate() 5. 404 Page Handling 6. Outlet for Nested UI Rendering The website contains a Navbar and Footer, where the middle content updates based on the selected route. In the Courses page, I used dynamic route parameters, so anything typed after /courses/ appears directly on the screen. Whereas in the Products page, if the user enters an undefined route, it displays a custom 404 | Page Not Found error page. I also added an additional Navigation Bar in product-related pages containing: 1. Back 2. Forward 3. Return to Home 4. using useNavigate() for a smooth routing experience. For styling, I used both CSS and Tailwind CSS to maintain a clean and modern UI. I learned these concepts from Sheryians Coding School YouTube Channel great resource for hands-on learning! 💻 Tech Stack Used: 1. React.js 2. react-router-dom 3. CSS + Tailwind CSS Key Concepts Practiced: BrowserRouter | Routes | Route | Outlet | useParams() | useNavigate() | Error Boundary Page Github repo : https://lnkd.in/g96bsGMc #reactjs #routing #frontenddevelopment #javascript #webdevelopment #reactrouterdom #learninginpublic #codingjourney

⚛️ Day 1 of my React Series — Let’s start with Components Ever wondered what a React component really is? It’s simpler than it sounds 👇 A React Component is just a JavaScript function that returns markup. But here’s the twist — it doesn’t return HTML, it returns JSX! JSX looks like HTML but works like JavaScript — that’s what makes React so powerful and declarative. 💡 In simple words: Think of components as LEGO blocks — reusable pieces that combine to build entire UIs. 🧩 One component for a button, one for a card, one for a navbar — and together, they make your app. #React #JavaScript #FrontendDevelopment #WebDevelopment #Learning #ReactJS #Frontend #Coding

🧠 React Hooks: The Real Game Changers You Probably Don’t Fully Use Yet When React introduced Hooks, it didn’t just update the syntax — it redefined how we think about state, logic, and reusability. But here’s the twist — most developers only scratch the surface. They use useState and useEffect, but rarely understand why or when to reach for the others. Let’s fix that 👇 ⚡ useState — The heartbeat of your component. If your UI changes, chances are it’s listening to this hook. 💡 useEffect — Think of it as your component’s “side-mission.” Anything external — fetching data, setting up subscriptions, or DOM interactions — lives here. 🧩 useRef — Your secret memory box. It remembers values without causing re-renders (and is the ninja of performance optimization). 🌐 useContext — The antidote to prop-drilling. It lets data flow freely across components — clean and elegant. ⚙️ useReducer — When state becomes complex, this hook brings order to chaos. Perfect for managing multiple related state transitions. 🚀 useMemo — Performance’s best friend. It caches computed values so your app doesn’t waste time redoing expensive calculations. 🧠 useCallback — Works hand-in-hand with useMemo. It prevents unnecessary re-renders by remembering functions. The beauty? Hooks let you write cleaner, more maintainable, and testable code — without bloating your components or relying on classes. Most beginners stop at “what they do.” Pros ask: “When should I use which — and why?” React Hooks aren’t just features — they’re a mindset. Once you truly get them, your code stops feeling procedural and starts feeling alive. 💬 Which hook do you think is the most underrated — and why? Let’s see how deep your React knowledge goes 👇 #ReactJS #WebDevelopment #Frontend #ReactHooks #JavaScript #CodingJourney #WebDev

React just made forms less painful – meet useActionState 😎 🧠 Truth bomb: For years, every React developer has written the same 3 things for forms: useState, useEffect, and... a whole lot of tears 😅 We handled loading states, success messages, and API responses manually — basically doing the same thing every single time 🙄 💡 Now enters React 19’s superhero: useActionState 🦸♂️ It takes care of your form submissions, state updates, and loading indicators — all in just a few lines of code. No more juggling multiple hooks like: const [data, setData] = useState(); const [loading, setLoading] = useState(); const [error, setError] = useState(); Now it’s simply: const [state, action, isPending] = useActionState(yourAction, initialState); and boom 💥 — React handles the rest. 🎭 Fun fact: Before this hook, React devs were basically doing “form yoga” — trying to balance async actions, error states, and spinners in one file. 🧘♂️ Now, it’s finally one smooth flow. 🔥 When to use it? 1. Form submissions (client or server actions) 2. Async API calls 3. Handling UI states without spaghetti code 🍝 💬 Your turn: Have you tried useActionState yet? What’s the most chaotic form handling experience you’ve had in React? 😂 Drop your funniest story below 👇 #JavaScript #WebDevelopment #CodingHumor #FrontendDevelopment #TechEducation #ProgrammingFun #LearnToCode #CodeNewbie #DeveloperCommunity #100DaysOfCode

🎯 Frontend Project: To-Do Application with Deadline & Local Storage (📅 Week 12) This week, I built a To-Do Application using React.js, focused on productivity and time management — with features to add, edit, delete, and track tasks efficiently. 🧩 What I Focused On: Implementing add, edit, and delete functionality for tasks Allowing users to set deadlines and receive visual notifications for crossed deadlines Categorizing tasks as completed or pending for better organization Storing data in Local Storage to retain tasks even after browser refresh Using React state management and props for dynamic updates Designing a clean, responsive UI for smooth user experience 💻 Technologies Used: React.js – Component-based frontend framework JavaScript (ES6) – Logic and interactivity HTML/CSS – UI layout and styling Local Storage API – Data persistence React Hooks (useState, useEffect) – State and lifecycle management 🧠 This week helped me strengthen my React fundamentals, especially in handling state management, component interactions, and data persistence. It was a great step toward mastering frontend logic with real-time task updates. #Week12 #Reactjs #FrontendDevelopment #ToDoApp #JavaScript #LocalStorage #WebApp #Hooks #StateManagement #CRUD #Productivity #LearningByDoing #52WeeksOfLearning #Brototype #BrototypeCalicut #BCK307 #MERNJourney

🚀 Just built the Tic-Tac-Toe game using React (from the official docs)! This project taught me not only core React concepts but also helped me fix some tricky bugs that improved my understanding. Key Concepts I Learned 🔹 Breaking UI into reusable components (Square, Board) 🔹 Passing data & callbacks using props 🔹 Managing state with useState 🔹 Why immutability matters (slice() before updating) 🔹 Clean one-way data flow from parent → child 🔹 Writing pure helper functions like calculateWinner() 🔹 Conditional rendering for displaying game status Interesting Bugs I Fixed Along the Way 🐞 1. Wrong loop condition (lines[0].length) I mistakenly used lines[0].length instead of lines.length in the winner-checking loop. This caused the winner function to stop early and fail in some cases. Fixing it helped me understand how array-of-arrays work in JavaScript. 🐞 2. Missing <> </> fragment wrapper At one point I didn’t wrap JSX elements inside a fragment, causing compilation errors. This taught me how JSX must always return a single parent element. 🐞 3. Infinite re-render confusion I learned the difference between: ✔ passing a function → onClick={() => handleClick(0)} ✘ calling a function during render → onClick={handleClick(0)} Understanding this removed my confusion about unnecessary re-renders. Overall Takeaway This small project helped me understand how React really works: state updates trigger re-renders, JSX must be well-structured, and immutability + pure functions make the UI predictable. Excited to keep building more projects! ⚡ #react #javascript #webdevelopment #frontenddevelopment #reactjs #learninginpublic #codingjourney #softwareengineering #programming #developers #100daysofcode #projectbasedlearning #webdev

⚛️ That moment when I finally understood useCallback() 😅 While working on a React project, I had a parent component that passed a function down to a child via props. Everything looked fine — until I noticed my child component was re-rendering every time I clicked anything, even if the data didn’t change! 🤯 After a few rounds of confusion (and console logs everywhere 😆), I discovered the culprit: React was re-creating the function on every render. That’s when I met my new best friend — useCallback() 💪 Here’s how it saved me 👇 ❌ Before: function Parent() { const [count, setCount] = useState(0); const handleClick = () => console.log("Clicked!"); return <Child onClick={handleClick} />; } ✅ After using useCallback(): function Parent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => console.log("Clicked!"), []); return <Child onClick={handleClick} />; } 💡 Lesson learned: useCallback() tells React: 👉 “Hey, this function is the same unless dependencies change.” No more unnecessary re-renders. 🚀 React isn’t just about writing components — it’s about learning how to make them efficient! #ReactJS #useCallback #WebDevelopment #MERNStack #FrontendDeveloper #PerformanceOptimization #LearningByDoing #JavaScript #ReactHooks

⚛️ That moment when I realized useEffect() was watching everything I did 👀 When I first learned React, I used useState() like a pro... but then I needed to fetch data from an API. So naturally, I wrote it right inside my component: function App() { fetch("/api/data").then(...); return <h1>Hello</h1>; } And then React said: “Sure, let me fetch that again... and again... and again!” 😭 My console was spamming network requests like a DJ mixing beats. 🎧 That’s when I discovered useEffect() — the hook that runs side effects the right way. ✅ The correct way: useEffect(() => { fetch("/api/data").then(...); }, []); // runs only once 💡 Lesson learned: useEffect() lets you run side effects like fetching data, updating the DOM, or setting timers. The dependency array ([]) controls when it runs. Empty [] → runs once. Add variables → runs when they change. Now my app fetches data once, not forever. 🙌 React hooks aren’t just syntax — they’re patterns that teach us when and why things happen. 💭 #ReactJS #useEffect #ReactHooks #WebDevelopment #MERNStack #FrontendDeveloper #LearningByDoing #JavaScript #CodingJourney #ReactTips