Se você quiser acessar as props de um componente dentro de uma função definida dentro dele (como handleAdd
), você não precisa de usar this
ou sequer passá-las como argumento. Poderá acessá-las normalmente, fazendo uso do escopo do JavaScript, que te permite acessar variáveis do escopo superior.
Assim:
import React from 'react';
import PageHeader from '../template/PageHeader';
import Forms from '../componentes/Forms';
import List from '../componentes/List';
function Todo(props) {
function handleAdd() {
console.log(props);
}
return (
<div>
<PageHeader name='Tarefas ' small='Cadastro'></PageHeader>
<Forms handleAdd={handleAdd}></Forms>
<List></List>
</div>
);
};
export default Todo;
Veja um exemplo similar funcionando:
function Form(props) {
return (
<button onClick={props.onClick}>Clique-me!</button>
);
}
function Todo(props) {
function handleClick() {
console.log(props);
}
return (
<div>
<span>{props.todo}</span>
<Form onClick={handleClick} />
</div>
);
}
ReactDOM.render(
<React.Fragment>
<Todo todo="Foo" />
<Todo todo="Bar" />
<Todo todo="Baz" />
</React.Fragment>,
document.querySelector('#app')
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>
Note também que eu modifiquei as arrow functions por declarações de função normal, já que não há motivos para se usar arrow functions nesse caso. :)