Hello guys,
I'm relatively new to react hooks, and back in my time(one year ago), when I was passing props through
component, I would then use them with "props.something."
Now I have done a "todo list" and I can use my props in another way, by referencing the props in an objet in parameter :
const Form = ({ addTodo }) => {
addTodo(x)
}
What is that ? Why we don't use this.props anymore, why the object in parameter ? Is the old way passing props dead ? Is this because of react Hooks ?
To illustrate more my exemple here the two component talking to eachother.
The first one :
import React, {useState} from 'react';
import Form from './Form';
const Affichage = () => {
const [todos, setTodos] = useState([
'1',
'2',
'3',
'4'
])
const addTodo = text => {
const newTodos = [...todos, text];
setTodos(newTodos)
}
return (
<div>
<Form addTodo={addTodo} />
<ul>
{todos.map((item, index) =>{
return(
<li key={index}>
{item}
</li>
)
})}
</ul>
</div>
)
}
export default Affichage;`
The second one :
import React, {useState} from 'react';
const Form = ({ addTodo }) => {
const [value, setValue] = useState('');
const handleSubmit = e => {
e.preventDefault();
// console.log(value);
addTodo(value);
}
return(
<form onSubmit={handleSubmit}>
<input type="text" onChange={e => setValue(e.target.value)}/>
<button>Envoyer</button>
</form>
)
}
export default Form;
If someone passing by could enlight me it would awesome ☺
Nothing changed. It's just a shortcut for destructuring
const Component = props =>{
const { foo } = props
}
Is the equivalent of
const Component = ({ foo }) =>{
}
Related
I am try to add search feature to an existing lists of robot names.
In order to do so I am trying to useState hooks. I have an App component and Header component which has the input tag for search field.
Error I am getting is 'InputEvent' is assigned a value but never used.
Below is the code for App component (main component).
import "./App.css";
import Header from "./Header";
import Robo from "./Robo";
import { robots } from "./robots";
import { useState } from "react";
function App() {
const [query, setQuery] = useState("");
const InputEvent = (e) => {
const data = e.target.value;
setQuery(data);
const extraction = robots
.filter((curElem, index) =>
robots[index].name.toLowerCase().includes(query)
)
.map((curElem, index) => {
return (
<Robo
key={robots[index].id}
id={robots[index].id}
name={robots[index].name}
email={robots[index].email}
/>
);
});
return (
<div className="App">
<Header query={query} InputEvent={InputEvent} />
<div className="robo-friends-container">{extraction};</div>
</div>
);
};
}
export default App;
Child component
import React from "react";
import "./header.css";
const Header = ({ query, InputEvent }) => {
return (
<>
<div className="headerText">ROBO FRIENDS</div>
<div>
<input
type="text"
id="lname"
name="lname"
placeholder="Search"
value={query}
onChange={InputEvent}
/>
</div>
</>
);
};
export default Header;
Here is my answer in stackblitz app
https://stackblitz.com/edit/stackoverflow-robots-filter?file=App.tsx,Robo.tsx,Header.tsx,robots.ts
I have altered the code a bit.. you can fork the project and play with it..
You can add debounce option to your input, which prevents unwanted re-renders
Adding the changes:
function App() {
const [query, setQuery] = useState(undefined);
const [filteredRobots, setFilteredRobots] = useState([]);
useEffect(() => {
console.log(query);
const filteredRobots = robots.filter((robot) => {
return robot.name.includes(query);
});
if (filteredRobots.length) {
setFilteredRobots(filteredRobots);
}
}, [query]);
const onQueryChange = (e) => {
const data = e.target.value;
setQuery(data);
};
const renderRobots = () => {
if (!query || !query.length) {
return <p>{'Search to find Robots'}</p>;
}
if (filteredRobots && filteredRobots.length && query && query.length) {
return filteredRobots.map((filteredRobot) => (
<Robo
key={filteredRobot.id} //id is unique key in your data
name={filteredRobot.name}
id={filteredRobot.id}
email={filteredRobot.email}
/>
));
}
return <p>{'No Robots Found'}</p>;
};
return (
<div className="App">
<Header query={query} InputEvent={onQueryChange} />
{renderRobots()}
</div>
);
}
Problems in your code:
Const InputChange is a function that can be used as prop for any React component .. but you have added InputChange inside the InputChange named function itself which is incorrect
Extraction is a jsx variable which is created from Array.filter.. on each item, filter passes a item[index] to the filter function.. you dont want to do robots[index].name.toLowerCase().includes(query).. instead you could have done curElem.name.toLowerCase().includes(query) and same applies for Array.map
This is my App
import React, { useState } from "react";
import Input from "./components/Input";
function App() {
const [newRow, setNewRow] = useState([]);
const addRow = (event) => {
event.preventDefault();
setNewRow(
newRow.concat(<Input key={newRow.length} myKey={newRow.length} />)
);
};
return (
<div>
<button onClick={addRow}>Add row</button>
<ul>
<Input key={newRow.length} myKey={newRow.length}/>
{newRow}
</ul>
</div>
);
}
export default App;
And this is my Input component
import "./Input.css";
import React, { useState } from "react";
const Input = (props) => {
const [updatedList, setUpdatedList] = useState([])
const deleteRow = (event) => {
event.preventDefault();
const key = props.myKey;
setUpdatedList(updatedList.splice(key, 1));
console.log(updatedList);
};
const disableRow = (event) => {
event.preventDefault();
};
return (
<li className="item">
<select>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" />
<button onClick={deleteRow}>Delete</button>
<button onClick={disableRow}>Disable</button>
</li>
);
};
export default Input;
I guess I'm supposed to delete and disable the List HTML element through its key but I'm getting an empty array when I console.log(updatedList). So how can I delete from the original array in the parent component from the child component?
Add a deleteRow function to your App component.
// App.js
const deleteRow = (key) => {
setNewRow(newRow.filter(input => input.key != key));
}
Pass it as a prop to your child component and call it onClick.
// Input.js
const deleteRow = (event) => {
event.preventDefault();
const key = props.myKey;
props.deleteRow(key);
};
updatedList is unnecessary as you already have an array in the parent component.
Maybe have a look at context: https://reactjs.org/docs/context.html
It could help with your issue
The const [updatedList, setUpdatedList] = useState([]) is complete redundant. Instead, Lift the state by passing the newRow and the setNewRow directly into to the input component via props and manipulate it from there. Or pass in a function that manipulates it into the input component.
Also, you shouldn't call splice directly on the updatedList because it changes the contents of the list, and splice is an array which is a reference type.
It might be better to use filter(() => boolean) which returns a new array instead of mutation the current on. Or creating a new variable,
const updatedListCopy = [...updatedList]
and then call splice on that.
You should write deleteRow() as props from app.js
When you declare deleteRow() inside of individual Input component, that could not manipulate or update the parent values.
disableRow() is only usable for individual Input component, while deleteRow() relative with Parent newRow
App.js
import React, { useState } from "react";
import Input from "./components/Input";
function App() {
const [newRow, setNewRow] = useState([]);
const addRow = (event) => {
event.preventDefault();
setNewRow(
newRow.concat(<Input key={newRow.length} myKey={newRow.length} deleteRow={deleteRow} />)
);
};
const deleteRow = (key) => {
console.log(key)
}
return (
<div>
<button onClick={addRow}>Add row</button>
<ul>
<Input key={newRow.length} myKey={newRow.length}/>
{newRow}
</ul>
</div>
);
}
export default App;
In your component
import "./Input.css";
import React, { useState } from "react";
const Input = (props) => {
const [updatedList, setUpdatedList] = useState([])
const disableRow = (event) => {
event.preventDefault();
};
return (
<li className="item">
<select>
<option value="+">+</option>
<option value="-">-</option>
</select>
<input type="text" />
<button onClick={()=>props.deleteRow(props.key)}>Delete</button>
<button onClick={disableRow}>Disable</button>
</li>
);
};
export default Input;
I've been working on variations of this problem for a while now. Basically, I have a child component that can update existing data. It updates data with no problems and the parent re-renders accordingly. The child component doesn't re-render though. So, on advice given on this site, I've tried lifting the state. I'm passing down props down to the two child components I'm running. My problem is the "EditStudent" component. I can't seem to destructure/get the "setStudent" function that's being passed down from the parent component so I'm getting a "setStudent is not a function error" no matter how I try to call this function. Any advice is greatly appreciated as it's been driving me slowly insane on how to figure this out.
Here's the code I've been working with so far.
Parent component "StudentList"
import React, { useState } from "react";
import { useQuery } from "#apollo/client";
import { getStudents } from "../queries";
import StudentDetails from "./StudentDetails";
import DeleteStudent from "./DeleteStudent";
import EditStudent from "./EditStudent";
const StudentList = () => {
const [selectedStudent, setSelectedStudent] = useState("");
const { loading, error, data } = useQuery(getStudents);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error!</p>;
const handleClick = (student)=> {
//console.log(student)
setSelectedStudent(student);
};
let filteredStudents = [];
//console.log(data.students)
for(let i = 0; i < data.students.length; i++){
//console.log(data.students[i].class.name)
if(data.students[i].class.name === "1FE1"){
//console.log(data.students[i].name)
filteredStudents.push(data.students[i])
}
}
console.log(selectedStudent.id);
return (
<div>
<ul id="student-list">
{data.students.map((student) => (
<li key={student.id} onClick={(e) => handleClick(student)}>{student.name}</li>
))}
</ul>
{
selectedStudent ? <div>
<StudentDetails student={selectedStudent} setStudent={setSelectedStudent}/>
</div>
: <p>No Student Selected</p>
}
</div>
);
};
export default StudentList;
This is "StudentDetails" - a component receiving the "studentDetails" prop and also has two other components nested inside - "DeleteStudent" and "EditStudent"
import React from "react";
import { useEffect, useState } from "react";
import { getStudentQuery } from "../queries";
import { useQuery } from "#apollo/client";
import DeleteStudent from "./DeleteStudent"
import EditStudent from "./EditStudent";
const StudentDetails = ( selectedStudent )=> {
const {setStudent} = selectedStudent;
console.log(selectedStudent)
//const [astudent, setStudent] = useState(props)
return (
<div id="student-details" >
<h2>Name: {selectedStudent.student.name}</h2>
<h3>Age: {selectedStudent.student.age}</h3>
<h3>Class: {selectedStudent.student.class.name}</h3>
<h3>Test 1 Score: {selectedStudent.student.test1}</h3>
<EditStudent student={selectedStudent} setstudent={setStudent}/>
<DeleteStudent student={selectedStudent} setter={setStudent} />
</div>
)
}
export default StudentDetails;
Finally, here is the "EditStudent" component which is causing me so many problems (can't get the setStudent function from the parent to change the state)
import React, { useEffect, useState } from "react";
import { useMutation } from "#apollo/react-hooks";
//import { getStudents } from "../queries";
import StudentDetails from "./StudentDetails";
import { editStudentMutation, getStudentQuery, getStudents } from "../queries/index";
const EditStudent = ( setStudent ) => {
const { setStudent } = selectedStudent;
console.log(props)
const [name, setName] = useState();
const [age, setAge] = useState();
const [test, setTest] = useState();
const [editStudent] = useMutation(editStudentMutation);
return (
<form id="edit-student"
onSubmit={(e) => {
e.preventDefault();
editStudent({
variables: {
id: selectedStudent.student.student.id,
name: name,
age: age,
test1: test
},
refetchQueries: [{ query: getStudents}]
})
const aStudent = e.target.value;
setStudent(aStudent);
}}>
<div className="field" onChange={(e) => setName(e.target.value)}>
<label>Student Name:</label>
<input type="text"
value={name}/>
</div>
<div className="field" onChange={(e) => setAge(e.target.value)}>
<label>Age:</label>
<input type="text"
value={age}/>
</div>
<div className="field" onChange={(e) => setTest(e.target.value)}>
<label>Test One:</label>
<input type="text"
value={test}/>
</div>
<button type="submit" >submit</button>
</form>
)
}
export default EditStudent;
Your method named in your props setstudent "check left side of passed props"
<EditStudent student={selectedStudent} setstudent={setStudent}/>
and please access it like the following
const EditStudent = ( {setstudent} ) => {}
// or
const EditStudent = ( props ) => {
props.setstudent()
}
And these lines of code don't seem correct, from where you get this selectedStudent? your props named setStudent then you are accessing it to get the method setStudent
const EditStudent = ( setStudent ) => {
const { setStudent } = selectedStudent;
I am trying to convert class component of todo app into functional component. Everything goes well, but when I submit the form, the blank screen appears. I think there is some issue in handleSubmit function. Please help.
import React, {useState} from "react";
export const TodoFunc = (props: Props) => {
const [items, setItems] = useState([])
const [text, setText] = useState('')
const handleChange = (e) => {
setText(e.target.value)
}
const handleSubmit = (e) => {
e.preventDefault()
if (text.length === 0) {
return;
}
const newItems = {text: {text}, id: Date.now()}
setItems(() => (items.concat(newItems)))
setText('')
}
return (
<div>
<h3>TODO</h3>
<TodoList items = {items} />
<form onSubmit={handleSubmit}>
<label htmlFor="new-todo">
What do you want to do?
</label>
<input type="text"
id='new-todo'
onChange={handleChange}
value={text}
/>
<button>
Add #{items.length + 1}
</button>
</form>
</div>
);
};
const TodoList = (props) => {
return (
<ul>
{props.items.map(item => <li key={item.id}>{item.text}</li>)}
</ul>
)
}
Your problem lies in the below line:
const newItems = {text: {text}, id: Date.now()}
Here you are assigning an object to the text key and not just the value of the variable text.
And this is why when you loop over them in your TodoList component you are not able to display any of them.
I'm playing with hooks, and I'm trying to do the following:
import React, { useState, useRef } from 'react';
const EditableField = () => {
const [isEditing, setEditing] = useState(false);
const inputRef = useRef();
const toggleEditing = () => {
setEditing(!isEditing);
if (isEditing) {
inputRef.current.focus();
}
};
return (
<>
{isExpanded && <input ref={inputRef} />}
<button onClick={toggleEditing}>Edit</button>
</>
);
};
This is going to fail, because current is null, since the component haven't re-rendered yet, and the input field is not yet rendered (and therefore can't be focused yet).
What is the right way to do this? I can use the usePrevious hook proposed in the React Hooks FAQ, but it seems like a painful workaround.
Is there a different way?
You can use the useEffect hook to run a function after every render when isEditing changed. In this function you can check if isEditing is true and focus the input.
Example
const { useState, useRef, useEffect } = React;
const EditableField = () => {
const [isEditing, setEditing] = useState(false);
const toggleEditing = () => {
setEditing(!isEditing);
};
const inputRef = useRef(null);
useEffect(() => {
if (isEditing) {
inputRef.current.focus();
}
}, [isEditing]);
return (
<div>
{isEditing && <input ref={inputRef} />}
<button onClick={toggleEditing}>Edit</button>
</div>
);
};
ReactDOM.render(<EditableField />, document.getElementById("root"));
<script src="https://unpkg.com/react#16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
I know the accepted answer covers the requested element in the above question.
But as an additional note, if you are using functional components, make use of React.forwardRef to pass down the reference to child components. It might be
definitely useful for someone who refers to this question later on.
In a more cleaner way, you can write your child component which accept the ref as given below:
const InputField = React.forwardRef((props, ref) => {
return (
<div className={props.wrapperClassName}>
<input
type={props.type}
placeholder={props.placeholder}
className={props.className}
name={props.name}
id={props.id}
ref={ref}/>
</div>
)
})
Or Simply use this component
import { FC, useEffect, useRef } from 'react'
export const FocusedInput: FC<JSX.IntrinsicElements['input']> = (props) => {
const inputRef = useRef<null | HTMLElement>(null)
useEffect(() => {
inputRef.current!.focus()
}, [])
return <input {...props} type="text" ref={inputRef as any} />
}