score:0
well, you can basically map per row and it will be easier. don't forget to bind the methods in your constructor.
renderrow(el, i) {
return <tr key={i}> {array(this.state.boardwidth).fill(1).map(this.rendercolumns)} </tr>
}
rendercolumn(el, j) {
return <square key={j} />
}
render() {
return {array(this.state.boardheight).fill(1).map(this.renderrow)
}
score:0
bad requirements
you should treat react component as view - to render state of given (passed as prop) array - not creating this during render methods/calls!
create an array at start (constructor) and use indexes of map
functions to read "cells/fields".
you can use one linear array - length=width*height
- single map function in render and use css/styling to wrap them in rows by square and board widths. board width can be precalculated in constructor (when not changed in lifecycle) - board width = boardwidth
* square width - and passed in jsx.
of course you can use two map
functions to create 2d board. it can be used for rendering using <table/>
and <tr/><td>
html structure or for performance reasons. with second option create separate component and pass part of data as prop - it (almost) doesn't matter if it will be a separate array (better) or range from linear array - internally row
will be working on one simple array (and one map
fn). it should depend on engine requirements.
look for inspirations here. you have simpler case - you don't have to return events/moves.
Source: stackoverflow.com
Related Query
- React - Use nested map functions in render function to create a 2D board/grid
- How to use Bootstrap Modal inside map function in React Js to render indivisual elements?
- Should I call a function on every render or use arrow functions in a react class component?
- React - How to use hook useState props to create a map function
- Can't use map function inside React render
- Render Content Dynamically from an array map function in React Native
- use of variable inside render function of react component
- React won't render within map function
- How to not use setState inside render function in React
- React - Render Item inside map function by click event
- React waiting for map function before deciding render to prevent div flash
- React JS printing data inside a nested map function in JSX
- How to use ES6 map function in React stateless component
- How to use map function on react state hook
- Use serverless function to findById in MongoDB Database via Mongoose, and render result in React form - not working
- React nested map sequential render with setTimeout
- Render a table body in react using the map function
- React Js Map function not working on a nested array
- React map function to create <Redirect> which carry wrong parameter
- Use react component as a child or from within the render function of a React component
- How to make 3 column grid with map function react
- React won't render elements in map function
- How to use map function with react router?
- How Use images from javascript array in react using filter and map function
- How to use calc css function in react render
- How to Render Nested Map Items inside react component
- React iterate nested arrays/objects with map. Is return mandatory to render each map function?
- How to dynamically and conditionally render select options inside of a map function using React Hooks
- Unable to use div components with bootstrap classes inside map function in react
- React Datasheet Grid - Render function does not allow to change
More Query from same tag
- React - How to break a line in a cell of a material ui table
- Cannot read property 'push' of undefined in react
- What can be a dependency for React hooks?
- declare type with React.useImperativeHandle()
- <App/> component is not rendering in React.js
- Stuck at react useEffect for a chain of changes
- How to prevent click release on different element
- How to test public functions in Typescript with react-testing-library?
- React Router with a custom root and a base component
- Is there a way to read or convert object received by request with fs.readFile
- How to bootstrap component using react-router
- How do I pass the props from this child component to the parent form
- React native change background color of View on item from list
- Calling a seperate function from within useEffect in react
- Using React Hook Form with Material UI Select Component
- React Router Dom V6 pass array to path
- How to add and remove fields with redux-form
- Redirect to other page after logging in or out without loosing state
- Is there a way to render .jsx components inside express server
- How to create an sql statement with optional parameters
- how can i get input data from two dynamic form in react class component?
- React Antd: How to remove spacing between vertical divider and any content right next to it?
- e.target.value in button returns undefined sometimes. Why this happens?
- React Router Transition Animation missing timeout
- NextJS: How to keep button active?
- react-modal scroll top when open
- Redux proper send of payload
- Conditionally sending an object of key-value (array) from child to parent component
- Getting error: "Objects are not valid as a React child" on array rendering
- Create a type in Typescript that can be one of specific list of React components?