import React from 'react';
const RowArray=()=>{
return(
<div>
<h1>Row Array</h1>
</div>
)
};
const chunk_array = (list, integer)=>{
let temp_arr = list;
console.log('chunks',list,'integer',integer);
const list_of_chunks = [];
const iteration = Math.ceil(+list.length/+integer);
// list.map(x => {console.log(x,"map")})
for (let i;i< iteration ;i++ ){
console.log(i);
let temp_chunk = temp_arr.splice(6, temp_arr.length);
list_of_chunks.push(temp_chunk);
};
return list_of_chunks;
}
const TableArray=({details})=>{
const data = chunk_array(details);
console.log('data', data);
return(
<div className="d-flex flex-row">
<RowArray/>
</div>
)
};
export default TableArray;
the for loop in function chunk array won't work, supported as no i was logged in the console. I understand in jsx for loop may not work, I believe I define the function in pure javascript enviroment, so why do you think it is?
Console.log(i) doesn't log anything, as in the function skipped for loop line
you haven't initialized the value of i in the for loop
for (let i = 0; i < iteration; i++) {
// your code
}
chunk_array function expects two arguments and you're only passing one argument details
Related
So I'm learning react at the moment and I've been struggling with this issue..
I'm trying to do tic-tac-toe so I've got this code:
import './App.css';
import { useState } from "react"
const X = 1;
const O = -1;
const EMPTY = 0;
var Square = ({idx, click}) =>
{
let [val, setVal] = useState(EMPTY);
return (
<button onClick={() => {click(setVal, idx);}}>{val}</button>
)
}
var Logger = ({state}) =>
{
return (
<button onClick={() => {console.log(state);}}>log</button>
)
}
var App = () =>
{
let [turn, setTurn] = useState(X);
let state = new Array(9).fill(EMPTY);
let squares = new Array(9);
let click = (setValFunc, idx) =>
{
setTurn(-turn);
setValFunc(turn);
state[idx] = turn;
}
for (let i = 0 ; i < 9 ; i++)
{
squares[i] = (<Square click={click} idx={i}/>);
}
return (
<>
<Logger state={state} />
<div>
{squares}
</div>
</>
)
}
export default App;
so the squares ARE changing as I click them, but when I click the log button to log the state array to the console, the state array remains all zeros.
what am I missing here?
Your state has to be a React state again. Otherwise, the state you defined inside the App as a local variable only lasts until the next rerender.
Maintain tic-tac-toe state inside a useState hook
let [state, setState] = useState(new Array(9).fill(EMPTY));
Update the click handler accordingly.
let click = (setValFunc, idx) => {
setTurn(-turn);
setValFunc(turn);
setState((prevState) =>
prevState.map((item, index) => (index === idx ? turn : item))
);
};
In React, the state concept is important.
In your case, you need to understand what is your state and how you can model it.
If you are doing a Tic-Tac-Toe you will have:
the board game: a 3 by 3 "table" with empty, cross or circle signs
This can be modeled by an array of 9 elements as you did.
But then you need to store this array using useState otherwise between -re-renders your state array will be recreated every time.
I advise you to read https://reactjs.org/docs/lifting-state-up.html and https://beta.reactjs.org/learn.
I want to export a variable called recettesFromIngredients from search-box.js to ingredients-logic.js.
So to be more precise recettesFromIngredients is a variable with an empty array at first.
But then I fill this empty array here:
function ingredients(enteredValue) {
for (let i = 0; i < recettes.length; i ++) {
for (let d = 0; d < recettes[i].ingredients.length; d++) {
if ( recettes[i].ingredients[d].ingredient.toLocaleLowerCase().includes(enteredValue)) {
recettesFromIngredients.push(recettes[i]); // <-----------
};
};
};
};
So what I am trying to do is: once I fill this array I want to export it.
This is what I tried to do
export {recettesFromIngredients} // at the bottom of the file after the every function is called
In the console I don't have any error the export/import seems to be ok but when I console log this Var in the imported file I got an empty array while in the export file the array is filled as wanted!
What could be the problem that I am getting an empty array in ingredients-logic.js? Should I export from another position in the file or in another way?
Why don’t you try to export the function instead? Then you can call the function in another file , the function will return the filled array.
You have to return the array in the function call as well.
Your code should look like :
export default function ingredients(enteredValue) {
let recettesFromIngredients = [];
for (let i = 0; i < recettes.length; i ++) {
for (let d = 0; d < recettes[i].ingredients.length; d++) {
if ( recettes[i].ingredients[d].ingredient.toLocaleLowerCase().includes(enteredValue)) {
recettesFromIngredients.push(recettes[i]); // <-----------
};
};
};
return recettesFromIngredients
};
import the function in another file , then
call the function
const x= ingredients(enteredValue)
now const x has the array
I have this code and I want that after click li console.log display number of page. So I count my pages in pages const. I tryed do that on two way.
First:
const handlePageClick = (i) => {
console.log(i);
}
const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} onClick={handlePageClick(i)}>{i}</li>)
}
return list;
}
return (
<React.Fragment>
<div className="row">
<ul>
<Pagination pages={pages} />
</ul>
</div>
</React.Fragment>
);
It run handlePageClick method after run the app, not after click.
Second method I tryed:
const linkRef = useRef(null);
const handlePageClick = (i) => {
console.log(linkRef.current.innerText);
}
const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} ref={linkRef} onClick={handlePageClick}>{i}</li>)
}
return list;
}
It display the last result all the times. How can I solve my problem?
You have to pass a function to your onClick handler, so you can call handlePageClick in that function, and pass your current value of i like this:
const Pagination = ({pages}) => {
let list = []
for(let i = 1; i <= pages; i++){
list.push(<li key={i} ref={linkRef} onClick={() => handlePageClick(i)}>{i}</li>)
}
return list;
}
Notice how you're now passing () => handlePageClick(i) is now what you're passing to onClick. This is a function that gets executed when the click event happens, and it passes your current value of i
In your first attempt you need to use onClick={() => handlePageClick(i)}. This is because currently it is invoked on the app render because you are invoking the method so you create an infinite loop where the app is rendered -> the onClick event is invoked which causes a another render. Using an arrow function means you pass a function which is why you invoke it.
have a simple React component that displayes a character and should call a handler when clicked, and supply a number. The component is called many times, thus displayed as a list. The funny thing is that when the handler is called, the supplied index is always the same, the last value of i+1. As if the reference of i was used, and not the value.
I know there is a javascript map function, but shouldn't this approach work too?
const charComp = (props) => {
return (
<div onClick={props.clicked}>
<p>{props.theChar}</p>
</div>
);
deleteHandler = (index) => {
alert(index);
}
render() {
var charList = []; // will later be included in the output
var txt = "some text";
for (var i=0; i< txt.length; i++)
{
var comp =
<CharComponent
theChar = {txt[i]}
clicked = {() => this.deleteHandler(i)}/>;
charList.push(comp);
}
Because by the time you click on a letter, i is already 9 and it will remain 9 since the information is not held anywhere.
If you want to keep track of the index you should pass it to the child component CharComponent and then pass it back to the father component when clicked.
const CharComponent = (props) => {
const clickHandler = () => {
props.clicked(props.index);
}
return (
<div onClick={clickHandler}>
<p>{props.theChar}</p>
</div>
);
};
var comp = (
<CharComponent theChar={txt[i]} index={i} clicked={(index) => deleteHandler(index)} />
);
A little codesandbox for ya
I'd like to pass functions to the child using props, and create several components that can be clicked on
parent class:
handleClick(i){
alert(i);
}
render(){
var items = [];
for (var i = 0; i < 7; i++) {
items.push(
<Item onClick={()=>this.handleClick(i)} />
);
}
return <ul>{items}</ul>;
}
child class:
render() {
return (
<li onClick={this.props.onClick}> some names </li>
);
}
But the result is different from what I expected.
I wanted the first element to alert(0), the second element toalert(1), and so on.
But instead, all elements shows 7 when I click on them. I guess that's because I'm always using the i after for-loop has finished.
I guess this is a problem about basic concepts of scopes or using closure or something, rather than a React problem. But still I can't find a right way to fix this problem.
It happens because of closure, since your are using var keyword for forLoop iterator, its scope will be the render function and the value passed to handleClick will always be the updated value of iterator. Use let keyword to solve closure issue
render(){
var items = [];
for (let i = 0; i < 7; i++) { // let keyword for iterator
items.push(
<Item onClick={()=>this.handleClick(i)} />
);
}
return <ul>{items}</ul>;
}
Even with var, you can solve the closure issue using anonymous function
render(){
var items = [];
for (var i = 0; i < 7; i++) {
(function(index){
items.push(
<Item onClick={()=>this.handleClick(i)} />
);
}.bind(this))(i)
}
return <ul>{items}</ul>;
}