9- React JS darija : React add element to array & virtual dom
React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage their state efficiently. One of the most important features of React is its virtual DOM, which allows for efficient updates to the user interface without having to re-render the entire UI.
In this article, we will discuss how to add an element to an array in React and how the virtual DOM helps in optimizing the UI updates.
Adding an element to an array in React
Adding an element to an array in React is a common task when working with dynamic data. It can be done using the setState method, which is provided by the React component. Here’s an example of how to add an element to an array in React:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: ['item1', 'item2', 'item3']
};
}
addItem = () => {
this.setState(prevState => ({
items: [...prevState.items, 'new item']
}));
}
render() {
return (
{this.state.items.map(item => (
{item}
))}
);
}
}
In this example, we have a component called App that has an array of items in its state. We also have a method called addItem that uses the setState method to add a new item to the array.
The virtual DOM in React
The virtual DOM is a key feature of React that allows for efficient updates to the UI. When a component’s state changes, React compares the virtual DOM with the actual DOM and only updates the parts of the UI that have changed. This minimizes the number of DOM manipulations and leads to better performance.
When we add an element to an array in React, the virtual DOM comes into play by efficiently updating the UI. Instead of re-rendering the entire UI, React only updates the part of the UI that has changed, resulting in a more optimal and faster update process.
In conclusion, adding an element to an array in React is a common task that can be easily accomplished using the setState method. The virtual DOM in React helps optimize the UI updates, making the process more efficient and improving performance.
chukran
solution with Class :
class FruitListTwo extends React.Component{
state = {
fruitList : [],
}
getValueOfFruitList = (e)=>{
e.preventDefault();
let fruiValue = document.getElementById("fruit2").value;
this.setState({
fruitList : […this.state.fruitList,fruiValue],
});
document.getElementById("fruit2").value = "";
}
creatLi = ()=>{
return this.state.fruitList.map((fruit,index) =>(
<li key={index}>{fruit}</li>
))
}
render(){
return(
<>
<form >
<input type="text" id="fruit2" />
<input type="submit" value="Add Fruit" onClick={this.getValueOfFruitList}/>
</form>
<ul>
{this.creatLi()}
</ul>
</>
)
}
}
3adi nkhdmha bla mandir setFruit ndir ghir sitFruitList bhal haka ?
function FruitList() {
const [fruitList, setFruitList] = useState([]);
const getValueOfFruitList = (e) => {
e.preventDefault();
let fruitValue = document.getElementById("fruit").value;
setFruitList([…fruitList, fruitValue]);
document.getElementById("fruit").value = "";
}
const creatLi = ()=>{
return fruitList.map((fruit,index) => (
<li key={index}>{fruit}</li>
));
}
return (
<>
<form>
<input type="text" id="fruit" />
<input type="submit" value="Add Fruit" onClick={getValueOfFruitList} />
</form>
<ul>
{creatLi()}
</ul>
</>
);
}
mikandir e.prevent…. makaytl3och hta naktabha manuelle
e.target.value or ref instead of document.qery….
الله يجزيك بخير
a7ssan prof fl3alam keep going akhay
bghit nswlk wach n9dr ndir fblasst dik queryselector ndir dk lbln dyl e.target.value jrbtha khdmat hta hya mzyna yk?
❤
Nssit merci bzaf play list es6 vraiment zwina bzaf . Lo kan dir lina wahd play list dyal Prototype. Avancer et merci khouya😊
Merci bzaf mouad ana howa li ma3doch hata bac dert m3ak laravel complet et deja dert laravel vus js o daba ghadi ndir m3ak laravel react js frent end et backend
Merci bzaf akhoya tb3t m3ak laravel mzyan fhmt mzyan daba react kandir m3ak revision lay7fdk mnin tsali playlist wakha dir lina tpiyat