todoApp/src/components/InputField.jsx

29 lines
872 B
JavaScript

import React from "react"
export const InputField = ({ handleClick }) => {
const [value, setValue] = React.useState("")
const styles = {
wrapper: {
display: "flex",
flexDirection: "column",
gap: "8px"
},
input: {
height: "48px",
borderRadius: "8px"
},
button: {
borderRadius: "16px",
background: "grey",
color: "white",
margin: "8px"
}
}
return (
<div style={styles.wrapper}>
<input type={"text"} placeholder="enter your task..." value={value} style={styles.input} onChange={(e) => setValue(e.target.value)} />
<button type="submit" name="Submit" style={styles.button} onClick={() => { handleClick(value); setValue('') }} > Add Task </button>
</div >
)
}