TP2

Comment.js

import React, { useEffect, useState } from 'react'

import axios from "axios";
import './index.css'
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"></link>
function Comments () {
const [search,setSearch]=useState("")
const [comments,setCmments]=useState([])

const handelChange = event => {

setSearch(event.target.value);
let newComments = comments.filter( ele => {
return ele.name.includes(search)
})

console.log('value is:', event.target.value);

};

useEffect(
()=>{
axios.get(`https://jsonplaceholder.typicode.com/todos`)
.then((res)=>{ setCmments(res.data)})
},[] )

return (
<div>
<div className='d-flex justify-content-center'>
<nav className="navbar navbar-light bg-light">
<div className="container-fluid">
<form className="d-flex">
<input className="form-control me-2"
onChange={handelChange} value={search} type="search"
placeholder="Search" aria-label="Search"></input>
</form>
</div>
</nav>
</div>
<div className="container">
<p className="text-start">Search for : {search}</p>
<div className="row">
 { comments.map( comment => {
return (
<div className="col" key={comment.userId}>
<div className="card text-center">
<div className="card-header">
{comment.userId}
</div>
<div className="card-body">
<h5 className="card-
title">{comment.id}</h5>
<p className="card-
text">{comment.title}</p>
<p className="card-
text">{comment.completed}</p>
</div>
</div>
</div>
)
})}

</div>
</div>
</div>

);
}

export default Comments;

App.js

import React , {Component} from 'react';

import './App.css';
import Coment from './Coment';
class App extends Component{
render(){
return(
<div>
<Coment/>
</div>
);
}
}
export default App;

TP1

App.js

import React , {Component} from 'react';

import './App.css';
import Tache1 from './Tache1';

class App extends Component{

render(){
return(
<div>
<Tache1/>
</div>
);
}
}
export default App;

tache1

import React, { useEffect, useState } from 'react';

import Tache from "./Tache";
import "./index.css";

export default function App() {

const [id, setId] = useState(1)
const [todos, settodos] = useState({})
function handelChangeId(event) { setId(event.target.value) } useEffect(() =>
{
fetch(`https://jsonplaceholder.typicode.com/todos/${id}`).then((response)
=> { return response.json() }).then((todos) => { setId(todos.id);
settodos(todos); })
}, [id])
return (
<div className='form'>
<div>
<label>donner l'id:</label>
<input type="text" onChange={handelChangeId} value={id}></input>
<br></br>
<br></br>
<label>donner le titre:</label>
<input type="text" onChange={handelChangeId} value={id}></input>
<br></br>
<br></br>
<label>donner l'Etat:</label>