💡 How to Pass Data from Child to Parent in React? In React, data usually flows Parent → Child But what if child needs to send data back? 🤔 👉 Solution: Pass a function from Parent to Child 📌 How it works: 1️⃣ Parent creates a function 2️⃣ Pass it as a prop 3️⃣ Child calls that function 4️⃣ Data goes back to parent 📌 Example Use Cases: • Form submission • Button click in child • Updating parent state • Sharing user input ⚡ This pattern is called “Lifting State Up” Master this to build real React applications. Follow TFSC for practical frontend learning. #reactjs #reactprops #frontenddevelopment #javascript #webdevelopment #coding #learnreact #programming #tfsc
More Relevant Posts
-
🚀 React Series - Day 2 How Data Flows in React (Props Explained Simply) In React, components often need to share data with each other. This is done using props - a way to pass information from a parent component to a child component. Props help make components dynamic and reusable. For example, the same component can display different data just by changing the props. One important rule: props are read-only. They can be used, but not modified inside the component. 👉 This keeps data flow predictable and easy to debug. #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #learnreact #30daysofcode #programming #reactinterview #react #coding
To view or add a comment, sign in
-
Everyone jokes that the hardest part of programming is naming things, but honestly... it's just the truth. I can spin up a backend, connect a database, and get API routes working fast. But then I'll sit there for minutes completely paralyzed trying to decide if an array should be users, userList, userData, or userArray. (And let's not even talk about trying to name CSS wrapper divs). What’s the worst or weirdest variable name you’ve ever run into in a codebase? I know you guys have seen some bad ones 😂 #webdev #javascript #programming #developerlife
To view or add a comment, sign in
-
Problem: JavaScript’s `.sort()` mutates the array. Solution: Use `.toSorted()` instead. It returns a new sorted array. —— 👋 Join 30,000+ SWEs learning JS, React, Node.js, and Software Architecture: https://thetshaped.dev/ ——— 💾 Save this for later. ♻ Repost to help others find it. ➕ Follow Petar Ivanov + turn on notifications. #javascript #softwareengineering #programming
To view or add a comment, sign in
-
-
🚀 React Series – Day 15 Higher-Order Components (HOC) – Reusing Logic the Smart Way As applications grow, repeating the same logic across multiple components can make code harder to maintain. A Higher-Order Component (HOC) is a pattern used to reuse component logic. In simple terms, an HOC is a function that takes a component and returns a new enhanced component. Instead of duplicating logic, you can wrap components with an HOC to add extra behavior like: • Authentication checks • Logging • Data fetching 👉 This keeps your code cleaner and promotes reusability. Although modern React often uses hooks for similar purposes, understanding HOCs is still important - especially when working with older codebases. #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #learnreact #30daysofcode #programming #reactinterview #react #coding
To view or add a comment, sign in
-
30 Days JavaScript Challenge: Day 23 ✅ Today’s problem was about building our own version of groupBy() something that’s actually super useful in real projects. The idea was simple: Take an array, run a function on each element, and group elements based on the key that function returns. What I liked about this one is how it makes you think about data transformation not just looping, but structuring data in a cleaner and more usable way. Something like: Group users by id Split numbers based on a condition Organize data for UI rendering All of this becomes much easier once you understand this pattern. Another small step, but feels like I’m getting better at writing cleaner and more practical JavaScript. #javascript #leetcode #webdevelopment #frontenddeveloper #codingchallenge #learninginpublic #developers #programming #buildinpublic
To view or add a comment, sign in
-
-
One small JavaScript concept. Big real-world impact. If you don’t understand mutable vs immutable data, you’ll eventually hit bugs you didn’t expect. Especially in React. Mutable = flexible Immutable = safer Good developers know when to use each. Which causes more pain in real projects: mutation bugs or async bugs? 👇 #javascript #reactjs #frontenddevelopment #webdevelopment #softwareengineering #programming
To view or add a comment, sign in
-
-
30 Days JavaScript Challenge : Day 26 ✅ Today’s problem was about flattening a multi-dimensional array, but with a twist we were given a depth n and had to flatten only up to that level. Not a full flatten, not a shallow one… somewhere in between. It really makes you think about recursion and depth control: When to go deeper When to stop How to keep track of current depth What I liked is how this problem builds intuition around nested data structures something you see a lot in real apps (APIs, configs, UI trees, etc.). Slowly getting more comfortable with recursion and thinking in layers. #javascript #leetcode #webdevelopment #frontenddeveloper #codingchallenge #learninginpublic #developers #programming #buildinpublic
To view or add a comment, sign in
-
-
🚀 React Series - Day 4 Understanding useState (The Most Used React Hook) The useState hook is what allows functional components to manage data internally. It provides two things: • A state value • A function to update that value For example, a simple counter or input field is powered by useState. One key thing to remember: State should never be updated directly - always use the setter function. 👉 This ensures React knows when to re-render the UI properly. #reactjs #javascript #frontenddeveloper #webdevelopment #codinginterview #learnreact #30daysofcode #programming #reactinterview #react #coding
To view or add a comment, sign in
-
Understanding Props vs State in React is a game changer 🚀 When I started learning React, this was one of the most confusing topics for me. They look similar… but their purpose is completely different. 👉 Props = Data you receive (read-only) 👉 State = Data you manage (dynamic & changeable) Once you understand this difference, your code becomes: ✔ Cleaner ✔ More scalable ✔ Easier to debug This simple breakdown helped me a lot — hope it helps you too 🙌 💬 Tell me — what confused you more while learning React? Props or State? Visit : https://lnkd.in/dQb5UibS https://allconverthub.com/ #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #UIDeveloper #LearnInPublic #ReactLearning #WebDev #Programming #CodingLife #Developers #SoftwareDevelopment #UIUX #TechContent #CodingJourney
To view or add a comment, sign in
-
-
Understanding Props vs State in React is a game-changer for writing clean and scalable components. 👉 Props are read-only and help pass data from parent to child components — making your UI predictable and reusable. 👉 State, on the other hand, is managed within the component and allows it to be dynamic and interactive. 💡 In simple terms: Props = External data (immutable) State = Internal data (mutable) Mastering when and how to use each can significantly improve your component design and application performance. If you're diving into React or leveling up your frontend skills, this is a must-know concept! #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingConcepts #ReactLearning #Developers #UIUX #TechSkills
React.js Developer | 3.9 Years Experience | REST APIs | Context API | Performance Optimization | Immediate Joiner
Understanding Props vs State in React is a game changer 🚀 When I started learning React, this was one of the most confusing topics for me. They look similar… but their purpose is completely different. 👉 Props = Data you receive (read-only) 👉 State = Data you manage (dynamic & changeable) Once you understand this difference, your code becomes: ✔ Cleaner ✔ More scalable ✔ Easier to debug This simple breakdown helped me a lot — hope it helps you too 🙌 💬 Tell me — what confused you more while learning React? Props or State? Visit : https://lnkd.in/dQb5UibS https://allconverthub.com/ #ReactJS #FrontendDeveloper #WebDevelopment #JavaScript #UIDeveloper #LearnInPublic #ReactLearning #WebDev #Programming #CodingLife #Developers #SoftwareDevelopment #UIUX #TechContent #CodingJourney
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development