React Ts button not working

Code Help HTML/CSS/JS
1

Hello,
I’m new to React and Typescript and need help getting a button (the button in the ToDoElement function) to work.
I think it has something to do with the key properties, but I don’t really understand when I need to specify them.
This is the code:


type ToDo = {id:number, content:string}
function Add(props : {}){
  const styles : any = {
    container:{
      position:"relative",
      transform:"translateX(-50%)",
      left:"50%",
      textAlign:"center"
    },
    form: {
      backgroundColor:"#111",
      color:"white"
    },
    button:{
      backgroundColor: "#337722",
      color:"#fff",
      padding:"10px",
      borderRadius:"5px",
      fontSize:"15px",
      outline:"none",
      border:"none"
    },
    input:{
      margin:"10px",
      padding:"10px",
      borderRadius:"5px",
      fontSize:"15px",
      outline:"none",
      border:"none"
    }
  }
  return(
    <div style={styles.container}>
      <form style={styles.form} action="/todo" method="POST">
        <input style={styles.input} placeholder="Add a todo" id="content" type="text" name="content" required></input>
        <button style={styles.button} type="submit">Submit</button>
      </form>
    </div>
  )
}
function ToDoElement(props : {todo:ToDo}){
  const styles = {
    p:{
      color:"black"
    }
  }
  function handleClick(element:any) : any{
    alert('You clicked me!');
    alert(element)
  }

  return (
    <div>
      <button onClick={handleClick}>remove</button>
      <p style={styles.p} >{props.todo.content}{props.todo.id.toString()}</p>
    </div>
  )
}
function ToDos(props:{todos:ToDo[]}){
  let styles : any = {
    container:{
      backgroundColor:"#fff",
      padding:"12px",
      margin:"16px",
      maxWidth:'400px',
      position:"relative",
      transform:"translateX(-50%)",
      left:"50%",
      borderRadius:"8px",
    }
  }
  function handleClick() {
    alert('You clicked me!');
  }
  return (
    <div style={styles.container}>
      {props.todos.length ? 
        props.todos.map(todo => <ToDoElement key={todo.id.toString()} todo={todo}/>) : <p>Create a todo to start!</p>}
    </div>
  )
}
export function Home(props : {todos:ToDo[]}){
  const styles : any = {
    h1: {
      color: "white",
      backgroundColor: "#225577",
      padding: "10px",
      fontSize: "30px",
      textAlign:"center"
    },
    body: {
      fontFamily: "monospace",
      backgroundColor:"#111",
      margin:"0"
    }
  };
	return (
    <>
      <html>
        <head>
          <title>Todo App</title>
        </head>
        <body style={styles.body}>
          <h1 style={styles.h1} className="title">To Do App</h1>
          <Add></Add>
          <ToDos todos={props.todos}></ToDos>
        </body>
      </html>
		</>
	)
}

Also, does anyone know a better and easier way to add css to react elements?

Repl link : https://replit.com/@cldprv/todo-app?v=1

2

There’s a typo here “submi”:

<button style={styles.button} type="submi>Submit</button>

Another thing I noticed, is that you’re using html , head , and body tags within a component, but React don’t go that way. The top-level tags are defined in your HTML file (like index.html) and the React gets inserted within a div (or other container) inside the body.

So your home component will look something like this:

export function Home(props: {todos:ToDo[]}) {
  const styles: any = {
    h1: {
      color: "white",
      backgroundColor: "#225577",
      padding: "10px",
      fontSize: "30px",
      textAlign: "center"
    },
    body: {
      fontFamily: "monospace",
      backgroundColor: "#111",
      margin: "0"
    }
  };
  
  return (
    <div style={styles.body}>
      <h1 style={styles.h1} className="title">To Do App</h1>
      <Add />
      <ToDos todos={props.todos} />
    </div>
  )
}
1 Like
3

Thank you for your answer, I will set the React code in a div in an html file tomorrow, but the button is still not working… :upside_down_face: