React - Create nested components with loops - javascript

I have a little issue with React. I can't create a nested component with a for loop. What I want to do is create 9 cells of a table and then create 3 rows with 3 cells for every row and after that mount the 3 rows together and create a board 9x9.
Let say that I want to get something like this, but using a loop
class Board extends React.Component {
renderSquare(i) {
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}
render(){
return(
<div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
I searched others question for hours and I think my code is almost correct but it does not render what I want. I only get a white page.
here is my code:
class Board extends React.Component {
renderSquare(i) {
return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}
createCells(i){
if(i%3){return;}
var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
var cells = [];
index.forEach(function(i){
cells.push(() => {
return(
<div>
{this.renderSquare(i)}
</div>
);
});
});
return cells;
}
createRows(cells){
var index = this.fillMod3(Array(3)); //index=[0,3,6]
var rows = []
index.forEach(function(i){
rows.push(() => {
return(
<div>
{cells[i]}
{cells[i+1]}
{cells[i+2]}
</div>
);
});
});
return rows;
}
render(){
var cells = this.createCells(9);
var rows = this.createRows(cells);
var board = [];
var index = this.fillN(Array(1));
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
return(
<div>
{board[0]}
</div>
);
}
I always get on the screen something like this:
<Board>
<div> /*empty*/ </div>
</Board>
I want to clarify that I am sure that the rest of the code with which that component (Board) interacts has no issues.
I am new in react and if someoane can help me i will apreciate very much.
Sorry for my poor English
EDIT1:
following marklew examples i should be able to do something like this
render(){
var index1 = this.fillN(Array(3)); //index1=[0,1,2]
var index2 = this.fillN(Array(3)); //index2=[0,1,2]
return(
<div>
{index1.map((e1,i1) => {
return(
<div key={i1} className="board-row">
{index2.map((e2, i2) => {
return(
<p key={i2+10}>
{this.renderSquare(i2)}
</p>
)
})}
</div>
)
})}
</div>
);
}
but it doesn't do what I want. I obtain just a column with 9 cells and the cells are the same objects. I dont understand why. (I understand that are the same objects because i assign a handle function onClick when I create them like that:
<Board
onClick={(i) => this.handleClick(i)} //handleClick just draws a X in the cell
/>
and I get the X drown in 3 cells simultaneously
EDIT2:
I reached a solution:
render(){
var index1 = this.fillMod3(Array(3));
return(
<div>
{index1.map((e,i) => {
return(
<div key={i} className="board-row">
{this.renderSquare(e)}
{this.renderSquare(e+1)}
{this.renderSquare(e+2)}
</div>
)
})}
</div>
);
}
}
but is not what I want. I want another loop even for the intern renderSquare(i) function.

To render a list of elements inside JSX, you can do something like that:
render() {
return <div>
{
[1,2,3].map ( (n) => {
return this.renderSquare(n)
})
}
</div>;
}
Just wrap your array of components into {} in your JSX.
To clarify a bit, this is the same logic of:
return <div>
{
[
<h1 key="1">Hello 1</h1>,
<h1 key="2">Hello 2</h1>,
<h1 key="3">Hello 3</h1>
]
}
</div>;
Note that everytime you render an array of components, you must provide a key prop, as pointed here.
Also, if you want simply print row value in your render function, you should replace:
index.forEach(function(row){
board.push(() => {
return(
<div>{row}</div>
);
});
})
with:
index.forEach( (row, index) => {
board.push(<div key={index}>{row}</div>)
})
or, yet, replacing forEach and push with map:
board = index.map( (row, index) => <div key={index}>{row}</div> )
EDIT I created a fiddle with a 9x9 board using your code as a base: https://jsfiddle.net/mrlew/cLbyyL27/ (you can click on the cell to select it)

I see you too are doing the JS React tutorial! Here's what I did, but I'm working on this because there has to be a good way to give each of these individual keys.
I ran into the same issue you were running into where the X's were drawn into 3 squares, and the reason that happens is because when you were rendering squares, some of the "i's" were duplicated. So there were multiple Squares with the "i" of 2 for example (at least that was the case in my issue).
So each Square has an index right? [0,1,2,3,4,5,6,7,8].
First we need to find how these are related in a way that we can render them into rows! So, in your example you have index1 and index2, which I assume will refer to the x and y coordinates of the Square in the Board. Re-writing the array above we come to: [{0,0}, {1,0}, {2,0}, {0,1}, {1,1}, {2,1}, {0,2}, {1,2}, {2,2}] using {x,y} format. How can we use these values (which we would get from your index1 and index2 in order to get the original array of values that we started with [0,1,2,3,4,5,6,7,8]?
What I did was 3 * x + y (or in a loop, 3 * i + j). This way each square has a unique "i" value associated with it.
After I set up my loops I used this SO post to correctly return the elements I created from a separate function (in a poor attempt to keep my code cleaner).
This is what I ended up with, but I need to make sure to set the keys correctly which is actually how I stumbled onto this post:
createSquares() {
let rows = [];
for(var i = 0; i < 3; i++){
let squares = [];
for(var j = 0; j < 3; j++){
squares.push(this.renderSquare(3*i+j));
}
rows.push(<div className="board-row">{squares}</div>);
}
return rows;
}
Then my render function in Board looks like this:
render() {
return (
<div>
{this.createSquares()}
</div>
);
}

Here is the best I could think of after reading answers here and in Loop inside React JSX
:
render() {
return (
<div>
{
[...Array(3)].map((_, i) => (
<div key={i} className="board-row">
{
[...Array(3)].map((_, j) => this.renderSquare(3 * i + j))
}
</div>
))
}
</div>
);
}
P.S. I'm also doing the challenges in the new React Tutorial. =p

Live demo on codepen
Nested loops in render() function
(explanation in comments:)
class Board extends React.Component {
renderSquare(i) {
return (
<Square
value={this.props.squares[i]}
key={i}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
var self = this;
return (
<div>
// you can use: [...Array(3)] instead of [1,2,3]
{[1, 2, 3].map(function(row, rowIdx) { // create rows
return (
<div className="board-row" key={rowIdx}>
{
// you can use: [...Array(3)] instead of [1,2,3]
[1, 2, 3].map((col, colIdx) => { // create columns
return self.renderSquare((3 * rowIdx) + colIdx); // calculate square index
})
}
</div>
);
})}
</div>
);
}
}

I will assume you are looking at the React Tutorial example.. As the instructions explicitly point out, the idea is to make two loops, not just the one.
The first loop in this example creates the 3 rows. The second nested loop creates the 3 necessary columns, returning a Square for each position through the renderSquare function. You may notice that I use the indexes of both loops to correctly assign the corresponding index to the square.
return (
<div>
{[0,1,2].map(i => {
return (
<div className="board-row">
{[0,1,2].map(j => {
return this.renderSquare(3*i + j)
})}
</div>
);
})}
</div>
);

Here's my solution. It may help.
renderSquare(i) {
return (
<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>
);
}
render() {
let rows = [];
for (let i = 0; i <= 2; i++) {
let children = []
for (let j = i * 3; j <= i * 3 + 2; j++) {
children.push(this.renderSquare(j))
}
rows.push(
<div key={i} className="board-row">
{children}
</div>
)
}
return (
<div>
{rows}
</div>
);
}

This snippet uses map in a way similar to how we define a nested loop.
const buildBoard = [0, 1, 2].map((row) => {
return (
<div className='board-row' key={row}>
{[0, 1, 2].map((col) => {
return this.renderSquare(row * 3 + col);
})}
</div>
);
});
return <div id='Board Container'>{buildBoard}</div>;

You are pushing functions to the board array. If you want render them, you have to call those functions like
{board[0]()}
I prepared an example that covers your problem: http://jsbin.com/hofohiy/edit?js,output

I'm working on the React tutorial also. Thanks for your responses. I got to this solution:
render() {
const rows = [];
for(let i = 0; i<9; i=i+3) {
const oneRow = [];
for(let j = i; j < i+3; j++) {
oneRow.push(this.renderSquare(j, j))
}
rows.push(<div className="board-row" key={i + 'someId'}>{oneRow}</div>)
}
return (
<div>
{rows}
</div>
);
}
Where I changed renderSquare to set a key for the Square component, as the second argument.
renderSquare(i, key) {
return (
<Square
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
key={key}
/>
);
}

This should resolve the problem your facing.
This adds another loop even for the intern renderSquare(i) function.
It does what you want i.e. display 3 columns with 3 cells for the tic tac toe game.
render() {
let count = 0;
const index = [1, 2, 3];
return (
<div>
{index.map((v, i) => {
return (
<div key={i} className="board-row">
{index.map((v2, i2) => {
return this.renderSquare(count++);
})}
</div>
);
})}
</div>
);
}

The first solution:
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
const board2 = [];
for (let i = 0; i < 3; i++) {
const s = [];
for (let k = 0; k < 3; k++) {
s[k] = <Square
key ={3*i+k}
value ={this.props.squares[3*i+k]}
onClick ={()=>this.props.onClick(3*i+k)}
/>;
}
board2[i] = <div className="board-row" key={i}>{s}</div>;
}
///////////////////////////////////////
return (
<div>{board2}</div>
);
}
}
The second solution:
import React from 'react';
import Square from './Square';
export default
class Board extends React.Component {
render() {
let board =Array(3).fill(null);
let square =Array(3).fill(null);
const x = board.map((b,bIndex)=>{
return<div className="board-row" key={bIndex}>
{
square.map((s, sIndex)=>{
return <Square
key ={3*bIndex+sIndex}
value ={this.props.squares[3*bIndex+sIndex]}
onClick ={()=>this.props.onClick(3*bIndex+sIndex)}
/>;
})
}
</div>;
});
///////////////////////////////////////
return (
<div>{x}</div>
);
}
}
Square:
import React from 'react';
export default
function Square(props) {
console.log('square render')
return (
<button className="square" onClick={props.onClick}>
{props.value}
</button>
);
}

class Board extends React.Component {
renderSquare(i) {
return (<Square key={i} value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />);
}
render() {
let board = [];
for(let x = 0; x<3; x++){
let lis =[];
for(let y = 0; y<3; y++){
lis.push(this.renderSquare(3*x + y));
}
board.push(<div key={x}>{lis}</div>)
}
return (
<div>
{board}
</div>
);
}
}

My solution is:
class Board extends React.Component {
//range is a Sequence generator function
//Array.from(arrayLike[, mapFn [, thisArg]]).
//arrayLike - An array-like or iterable object to convert to an array
//mapFn - Map function to call on every element of the array
//thisArg - Value to use as this when executing mapFn
//range(0, 4, 1); => [0, 1, 2, 3, 4]
range = (start, stop, step) => Array.from(
{ length: (stop - start)/step +1 },
(_, i) => start + (i * step)
);
renderSquare(i) {
return <Square
key={i}
value={this.props.squares[i]}
onClickChange={() => this.props.onClickChange(i)}
/>;
}
render() {
let row = 3;
let col = 3;
return (
<div>
{
//This generates an Array of [0, 3, 6] if row = 3 and col = 3
// n is the element and i is the index of the element, i starts at 0
this.range(0, row * col - 1, col).map( (n, i) => {
return (
<div key={i} className="board-row">
{
this.range(n, (i + 1) * col - 1, 1).map( (n, i) => {
return this.renderSquare(n)
})
}
</div>
)
})
}
</div>
);
}

Changed the code of the Board from the tutorial to reflect as
class Board extends React.Component {
constructor(props) {
super(props);
this.rows = Array(3).fill(null);
}
renderSquare(i) {
return (<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
/>);
}
renderRow(row) {
return (
<div key={row} className="board-row">
{this.rows.map((x, col) => this.renderSquare(3*row+col))}
</div>
);
}
render() {
return (
<div>
{this.rows.map((x, rowIndex) => this.renderRow(rowIndex))}
</div>
);
}
}

The answers above that provide an array, defeat the purpose of a loop; this isn't pretty, but then again, neither is React with JSX:
class Board extends React.Component {
render() {
let board=[];
for(let row=0;row<9;row+=3) {
let cols=[];
for(let col=0;col<3;col++) {
let i=col+row;
cols.push(<Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)}/>)
}
board.push(
<div className="board-row">
{cols}
</div>
);
}
return (
<div>
{board}
</div>
);
}
}

hmm, i think it's way simpler nowadays, cuz i just did
export default function Board(props){
return(
<div id = "board">
{createBoard(3, 3)}
</div>
)
}
function Square(props){
return(
<div className = "boardSquare" style = {{
gridColumn: props.x,
gridRow: props.y}}>
</div>
)
}
function createBoard(x, y){
// x and y being the max "cells" my board will have
let grid = [];
for(let i = 0; i < x; i++){
for(let u = 0; u < y; u++){
grid.push(<Square x = {i + 1} y = {u + 1} key = {`x${i+1}y${u+1}`}/>);
}
}
return grid;
}
and it did exactly what i wanted it to, so yeah, just returning an array solved my problem, i hope my answer is useful to someone.

Just for giggles here's a recent working example as a function component
import React from "react";
import Square from "./Square";
import "./Board.css";
export default function Board(props) {
function renderSquare(i) {
return (
<Square
key={i}
value={props.squares[i]}
onClick={() => props.onClick(i)}
/>
);
}
return (
<div className="board-wrapper">
{
[...Array(3).keys()].map( row => (
<div key={row} className="board-row">
{
[...Array(3).keys()].map( col => renderSquare((row * 3) + col))
}
</div>
)
)
}
</div>
)
}

Related

how to change color of boxes in 2D grid of specific cell on click in reactJs?

Basically I was trying to make 10*10 grid such that clicking on specific cell by it cell number change all multiple cell color? for example clicking on cell 5 it change all boxes which having multiple of 5 values. For grid I used tailwindcss
Can anyone please tell that why in my code background color of multiple cells is not changing?
const { useState } = React;
function App() {
const [fillcolor, setFillcolor] = useState("");
var items = [];
for (let i = 1; i <= 100; i++) {
items.push(<div onClick={() => changeColor(i)} className="border border-gray-600 text-center">
{i}
</div>)
}
function changeColor(index) {
alert(index);
setFillcolor("yellow");
for (var i = 0; i < items.length; i++) {
if ((i + 1) % index === 0) {
items[i] = <div style={{ backgroundColor: fillcolor }} className="border border-gray-600 text-center">
{(i + 1)}
</div>
}
}
console.log(items[0]);
}
return (
<div className="App">
<div className="container">
<div className="grid grid-cols-10 grid-rows-10">
{items}
</div>
</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
You are modifying items inside your changeColor function, which React will never find out (since it's not a state). When React rerenders the component, the variable will be redefined. Instead, I'd recommend storing the highlighted factor. The fillColor does not need to change (at least in your code it's always set to 'yellow') and therefore should not be a state.
The following should work:
function App() {
const [selectedIndex, setSelectedIndex] = useState(null);
const items = [];
for (let i = 1; i <= 100; i++) {
let style = {};
if(selectedIndex !== null && i % selectedIndex === 0){
style = {
backgroundColor: "yellow"
};
}
items.push(<div onClick={() => changeColor(i)} className="border border-gray-600 text-center" style={style}>
{i}
</div>)
}
function changeColor(index) {
// only need to set the state here
setSelectedIndex(index);
}
return (
<div className="App">
<div className="container">
<div className="grid grid-cols-10 grid-rows-10">
{items}
</div>
</div>
</div>
);
}
As #skrrrt said, in React is suggested to not manipulate DOM like you are doing now. Much better use state variables. I suggest you to modify your code in this way:
const { useState } = React;
function App() {
const [fillcolor, setFillcolor] = useState(new Array(100).fill("white")); // <-- this is an array of colors to apply to elements
const numbers = Array.from({length: 100}, (_, i) => i + 1); // <-- this is an array of first 100 numbers from 1 to 100
const multiplesOf = (numbers, number) => numbers.filter(n => !(n % number)); // <-- this function returns multiple of selected value in numbers array
function changeColor(index) {
let result = [...fillcolor];
let indexToColor = multiplesOf(numbers, index);
indexToColor.forEach((idx) => result[idx - 1] = "yellow");
setFillcolor(result);
}
return (
<div className="App">
<div className="container">
<div className="grid grid-cols-10 grid-rows-10">
{numbers.map((el) => (
<div style={{ backgroundColor: fillcolor[el - 1] }} onClick={() => changeColor(el)} className="border border-gray-600 text-center">
{el}
</div>
))}
</div>
</div>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Credits: multiplesOf function is taken from here; numbers fill function is taken from here.

What is a react way to do this?

I have a pretty basic scenario where I have bunch of selectable/clickable elements and want to highlight the last selected/clicked. Here is my jquerish version of it where I add particular css class to the selected element and remove that class from its siblings. Is there any better way to do this with React ?
function Controls(props) {
const getSiblings = (element) => {
let siblings = [];
if (!element.parentNode) {
return siblings;
}
let sibling = element.parentNode.firstChild;
while (sibling) {
if (sibling.nodeType === 1 && sibling !== element) {
siblings.push(sibling);
}
sibling = sibling.nextSibling;
}
return siblings;
};
const handleClick = (event) => {
event.target.classList.add("symbol-preview-selected");
let siblings = getSiblings(event.target);
siblings.map((e) => {
e.classList.remove("symbol-preview-selected")
});
};
return(
<div className="grid-control-container">
<div className="flex-row-container">
<span style={{marginRight: "4px"}}>Color:</span>
<div className="flex-row-container">
{[...Array(10).keys()].map((i) => <div className={`symbol-preview symbol-`+i} onClick={handleClick} key={i.toString()}/>)}
</div>
</div>
</div>
);
}
Put the clicked element index into state instead.
function Controls(props) {
const [selectedIndex, setSelectedIndex] = useState(-1);
const makeHandleClick = i => () => {
setSelectedIndex(i);
};
return (
<div className="grid-control-container">
<div className="flex-row-container">
<span style={{ marginRight: "4px" }}>Color:</span>
<div className="flex-row-container">
{[...Array(10).keys()].map((i) => (
<div
className={'symbol-preview symbol-' + i + (i === selectedIndex ? ' symbol-preview-selected' : '')}
onClick={makeHandleClick(i)}
key={i}
/>
))}
</div>
</div>
</div>
);
}

How would I update the app state in a React App during a recursive function which is imported from another file?

I am building a sorting algorithm visualization app, where some of the sorting algorithms are recursive. For this example I will use merge sort. I would like my sorting functions to be in a separate file for better file structure but am having a hard time updating the state using these imported functions.
Here is my App.js code:
import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch.js';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown'
import ReactBootstrapSlider from 'react-bootstrap-slider'
import "bootstrap-slider/dist/css/bootstrap-slider.css"
import './App.css';
var arrayHelper = require('./helpers/array.js');
var mergeHelper = require('./algorithms/merge.js');
class App extends Component {
constructor(){
super();
//this.reset = this.reset.bind(this);
this.shuffle = this.shuffle.bind(this);
this.setAlgo = this.setAlgo.bind(this);
this.setArraySize = this.setArraySize.bind(this);
this.mergeSort = this.mergeSort.bind(this);
this.arraySize = 500;
this.state = {currentArray: undefined, initialArray: undefined, algo: undefined, arraySize: undefined};
}
componentWillMount(){
//let currentArray, initialArray;
let arr = arrayHelper.createRandomArray(this.arraySize);
this.setState({currentArray: arr, initialArray: arr, algo: 'Select Algorithm', arraySize: 500});
}
//Shuffles array to new random array
shuffle(){
this.setState({currentArray: arrayHelper.createRandomArray(this.state.arraySize)})
}
//Sets user-specified search algorithm based on dropdown button onClick
setAlgo(selectedAlgo){
this.setState({algo: selectedAlgo})
}
//Sets the user selected array size
setArraySize(value){
let arr = arrayHelper.createRandomArray(value);
this.setState({currentArray: arr, arraySize: value})
}
//Runs the imported mergeSort function from separate file
mergeSort(){
mergeHelper.mergeSort(this.state.currentArray, 0, this.state.currentArray.length-1);
}
render() {
return (
<header class='App-header'>
<div class='Buttons'>
<button onClick={this.shuffle}>Shuffle Array</button>
<button onClick={this.mergeSort}>Sort</button>
</div>
<div>
<ReactBootstrapSlider
value={this.state.arraySize}
change={event => this.setArraySize(event.target.value)}
//slideStop={this.changeValue}
step={100}
max={1000}
min={100}
orientation="horizontal"
reversed={false}
//disabled="false"
/>
</div>
<div class='Array'>Array Size: {this.state.arraySize}</div>
<div>
<DropdownButton alignRight title={this.state.algo} id="dropdown-menu-align-right">
<Dropdown.Item eventKey='merge'>
<button onClick={() => this.setAlgo('Merge Sort')}>Merge Sort</button>
</Dropdown.Item>
<Dropdown.Item eventKey='bubble'>
<button onClick={() => this.setAlgo('Bubble Sort')}>Bubble Sort</button>
</Dropdown.Item>
<Dropdown.Item eventKey='quick'>
<button onClick={() => this.setAlgo('Quick Sort')}>Quick Sort</button>
</Dropdown.Item>
<Dropdown.Item eventKey='selection'>
<button onClick={() => this.setAlgo('Selection Sort')}>Selection Sort</button>
</Dropdown.Item>
<Dropdown.Item eventKey='insertion'>
<button onClick={() => this.setAlgo('Insertion Sort')}>Insertion Sort</button>
</Dropdown.Item>
</DropdownButton>
</div>
<div class='Grid'>
<P5Wrapper sketch={sketch}
currentArray={this.state.currentArray}
arraySize={this.state.arraySize}
></P5Wrapper>
</div>
</header>
);
}
}
export default App;
Here is my merge helper file code:
//Function to merge two sorted arrays
function merge(array, left, mid, right){
var n1 = mid - left + 1;
var n2 = right - mid;
var leftArray = [];
var rightArray = [];
for(let i=0;i<n1;i++){
leftArray.push(array[left + i]);
}
for(let j=0;j<n2;j++){
rightArray.push(array[mid + 1 + j]);
}
var i=0;
var j=0;
var k=left;
while(i<n1 && j<n2){
if (leftArray[i] <= rightArray[j]){
array[k] = leftArray[i];
i++;
}
else{
array[k] = rightArray[j];
j++;
}
k++;
}
while(i<n1){
array[k] = leftArray[i];
i++;
k++;
}
while(j<n2){
array[k] = rightArray[j];
j++;
k++;
}
}
//Recursively called mergesort function
function mergeSort(array, left, right){
if(left>=right){
return;
}
var mid = Math.floor((left + (right-1))/2);
mergeSort(array, left, mid);
mergeSort(array, mid+1, right);
merge(array, left, mid, right);
}
module.exports = {merge, mergeSort}
The this.state.currentArray must be updated after each call of merge() but cannot be returned each time due to mergeSort() being recursive. Is there a way to pass this.state as a parameter to mergeSort(), updating this parameter in the mergeSort/merge functions themselves?
This is my first question on Stack so please let me know if I have posted too much info or have been to vague. Thanks.

Is there a better way to loop through data in the render section of React?

I am looking to loop through data, call a function, and return the results so they can be posted in the render section of React. I am new to the language and was trying to implement an extra feature in the main React tutorial.
I'm trying to make the render section look like the following:
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
The task is to use two loops to create the above structure. This is my code:
const board = [0, 1, 2].map((num) => {
const row = Array(3);
for (let i of [0, 1, 2]) {
row[i] = this.renderSquare(num*3 + i);
}
const board_row = row.map(num2 => {
return (
num2
)
})
return (
<div className="board-row">
{board_row}
</div>
);
});
I think the board_row variable is wasteful because it does a whole map operation just to format the row properly. When I try to move the for loop into the map operation, I can't find a way to pass num into the map operation.
const board = [0, 1, 2].map((num) => {
const board_row = [0, 1, 2].map(num2 => {
// How do I get num here?
return this.renderSquare(num*3 + num2);
})
return (
<div className="board-row">
{board_row}
</div>
);
});
How do I do this properly?
You can do it like that since you can't left a tag opened until the next iteration
return (
<div>
{
[0,3,6].map(num => (
<div className="board-row">
{
Array(3).fill().map(
(_, index) => this.renderSquare(index + num)
)
}
</div>
))
}
</div>
);
I'm a little rusty with React so you may need to tweak this a bit:
let result
return Array(9).map((el,idx) => {
if(!idx % 3){
result += <div className="board-row">
}
result += {this.renderSquare(idx)}
if(!(idx-2) % 3){
result += </div>
}
return result
})

Why is node.appendChild() not working?

I have this bit of code that's later going to be used to spit out the dates in a calendar. I'm trying to do this dynamically so I can load in the dates from the current month. I'm using reactjs and I keep getting an error that appendChild is not a function. I don't see what's wrong here, according to the docs its looks correct. See documentation
let datesContainer = document.getElementById('display')
function drawCalendar() {
for (let i = 0; i < 42; i++) {
let dateNode = document.createElement("div")
dateNode.textContent = toString(i)
dateNode.setAttribute("id", "dateNode" + i)
datesContainer.appendChild(dateNode)
}
}
drawCalendar()
class App extends Component {
render() {
return (
<div className="App">
<div className="display">
<div className="d-numbers" id="display">
</div>
</div>
</div>
);
}
}
You where using the tostring() function the wrong way. You don't need that at all to be honest. Javascript does that automatically.
let datesContainer = document.getElementById('display');
function drawCalendar() {
for (let i = 0; i < 42; i++) {
let dateNode = document.createElement("div");
dateNode.textContent = i;
dateNode.setAttribute("id", "dateNode" + i);
datesContainer.appendChild(dateNode);
}
}
drawCalendar();
<div id="display"></div>
This should work for you:
class App extends Component {
makeCalendarDates = () => {
const dates = [];
for (let i = 0; i < 42; i++) {
const nodeId = `dateNode${i}`;
dates.push(<div id={nodeId} key={nodeId}>${i}</div>);
}
return dates;
}
render() {
return (
<div className="App">
<div className="display">
<div className="d-numbers" id="display">
{this.makeCalendarDates()}
</div>
</div>
</div>
);
}
}
I suppose this is a Reactjs specific thing or just the timing on how the code is executed. As you can see with #MarkBaijens answer the code does work in vanilla js. #Derek Led me to the solution which was to put my function and DOM element inside a componentDidMount() method. In react the place initialize a variable with a DOM node is inside that method see documentation.
class App extends Component {
componentDidMount() {
let datesContainer = document.getElementById('display')
function drawCalendar() {
for (let i = 0; i < 42; i++) {
let dateNode = document.createElement("div")
dateNode.textContent = i
dateNode.setAttribute("id", "dateNode" + i)
datesContainer.appendChild(dateNode)
}
}
drawCalendar()
}
render() {
return (
<div className="App">
<div className="display">
<div className="d-numbers" id="display">
</div>
</div>
</div>
);
}
}

Categories