Scribd
Upload
3 views2 pages

Task Parent Child

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

Task Parent Child

Uploaded by

xaheti3494
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Task parent child:

import React, { useState } from 'react';


import ReactDOM from 'react-dom';

// TaskItem Component (Child)


const TaskItem = ({ name, completed }) => {
return (
<div style={styles.taskItem}>
<p>{name}</p>
<p style={completed ? styles.completed : styles.notCompleted}>
{completed ? 'Completed' : 'Not Completed'}
</p>
</div>
);
};

// TaskList Component (Parent)


const TaskList = () => {
const [tasks] = useState([
{ name: 'Complete React project', completed: true },
{ name: 'Read a technical article', completed: false },
{ name: 'Update resume', completed: false },
]);

return (
<div style={styles.taskList}>
<h1>Task List</h1>
{tasks.map((task, index) => (
<TaskItem key={index} name={task.name} completed={task.completed} />
))}
</div>
);
};

// App Component
const App = () => {
return (
<div>
<TaskList />
</div>
);
};

// Styling Object
const styles = {
taskList: {
textAlign: 'center',
maxWidth: '400px',
margin: '50px auto',
padding: '20px',
border: '1px solid #ccc',
borderRadius: '8px',
backgroundColor: '#f9f9f9',
},
taskItem: {
display: 'flex',
justifyContent: 'space-between',
padding: '10px',
borderBottom: '1px solid #eee',
},
completed: {
color: 'green',
},
notCompleted: {
color: 'red',
},
};

// Render App
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

You might also like