Develop Reference

nested array maps not rendering in react return

I have a react return like so:
return (
<div className="App">
{data && (
<div>
{data.map((d) => {
return (
<div key={d.id}>
<div>{d.string}</div>
<div> {d.array.map((el) => {
<div>{el}</div>
})}
</div>
</div>
);
</div>
)}
</div>
);
Each {el} doesn't render but the array exists, if I try and render {d.array[0]} the first index of the array is rendered, so I'm not the issue. I don't get an error and nothing breaks. Is it a react issue or a javascript issue, or is my syntax wrong.

You need to add a key to each children of your second map so React knows each one is different:
return (
<div className="App">
{data && (
<div>
{data.map((d) => {
return (
<div key={d.id}>
<div>{d.string}</div>
<div> {d.array.map((el, index) => {
return <div key={index}>{el}</div>
})}
</div>
</div>
);
</div>
)}
</div>
);

before the "=>" of second map, will have use "()" and not "{}", because all that be in {is js}, and in (jsx).

React - component is not rendered

After receiving data from the DB server, you try to render it, but the console log shows the data, but the component is not rendered. What's the reason?
useEffect(() => {
readRequest().then(setTodos);
console.log()
}, []);
return (
<div className="App">
{todos.map((todo) => {
console.log(todo);
console.log(todo.text);
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
})}
<p>dfdf</p>
</div>
);
The picture is a screen capture.

Your .map callback does not return anything.
Change the { to (:
return (
<div className="App">
{todos.map((todo) => ( // <-- here
<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>
))}
<p>dfdf</p>
</div>
);
Or use the return keyword.
return (
<div className="App">
{todos.map((todo) => {
return (<div key={todo._id}>
{todo.text}
{`${todo.completed}`}
</div>);
})}
<p>dfdf</p>
</div>
);

Why my components inside the map runs twice even though just before of map it runs single time

The map function produces the < PricedLayout /> component twice. I don't understand why it occurs, so I assumed that it might be because my map function was called twice, but that isn't the case since I can see a single printing of "testing" right before the map function.
const FreeAndMegaTestSeries = (props) => {
return (
<div className={styles.main}>
<div className={styles.right}>
<p className={styles.mainHeading}>Mega Test Series</p>
<Slider
arrows={true}
slidesToShow={3}
slidesToScroll={2}
autoplay={false}
infinite={true}
prevArrow={<img src={leftarrow} alt="left arrow" />}
nextArrow={<img src={rightarrow} alt="right arrow" />}
>
{console.log("testing")}
{props.priced.length &&
props.priced.map((p, i) => {
return <PricedLayout p={p} i={i}/>
})}
</Slider>
</div>
</div>
);
};
export default FreeAndMegaTestSeries;
////////////////////////////PricedLaout////////////////////////
const PricedLayout = (props) => {
const p=props.p;
const i=props.i;
return (
<>
<div className={styles.slider}>
<div className={styles.container} key={i}>
<div className={styles.enroll}>1.2k students enrolled</div>
</div>
</div>
</>
);
};
export default PricedLayout;

How can I add as many buttons as passed in prop number with out causing too many re-render on React?

This should be relatively simple yet I can't figure it out. I want to render buttons dynamically depending on the prop that has been passed through the parent component. I can't ".map" since it is not an array and I cant seem to get my for loop to pass in React. Can I get some help please, what am I missing here on renderButtonsHandler()?
const Carousel = ({ chunkSize }) => {
const [currentSlide, setCurrentSlide] = useState(0);
const totalImages = imageArray.length;
const renderButtonsHandler = (chunkSize) => {
const buttons = [];
for (var i = 0; i < chunkSize; i++) {
buttons.push(
<button
className="circleButton"
key={i}
onClick={setCurrentSlide(i)}
></button>
);
}
return buttons;
};
return (
<div className="container">
<button </button>
{imageArray.map((img, index) => {
return (
<div>
{index === currentSlide && (
<img
className="carouselImg"
src={img}
key={index}
/>
)}
</div>
);
})}
<button></button>
{renderButtonsHandler(chunkSize)}
</div>
);
};
export default Carousel;

Of course you can .map if chunkSize is a number. But you have to do it in different way.
You don't need function for that. You can just create new array, fill it with empty strings and map by that. Then just use it in code like:
{new Array(chunkSize).fill("").map((item, i) => (
<button
key={i}
className="circleButton"
onClick={setCurrentSlide(i)}
></button>
))}
example is here

Maybe you can try this instead:
return (
<div className="container">
<button </button>
{imageArray.map((img, index) => {
return (
<div>
{index === currentSlide && (
<img
className="carouselImg"
src={img}
key={index}
/>
)}
</div>
);
})}
<button></button>
{[...Array(chunkSize).keys()].map(i)=>(
<button
className="circleButton"
key={i}
onClick={setCurrentSlide(i)}
></button>
)}
</div>
);

Cleaner react code when using loops and map

I have this code working with react, and its just getting very cluttered, so I was wondering if there is a way to make this code and others that are quite similar to look cleaner.
render() {
let result = null;
var obj = this.state.welcome;
let test = null;
if (this.state.isReal) {
test = Object.entries(obj).map(([key, value], index) => {
return (
<li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
});
result = (
<Aux>
<h3>Title</h3>
<ul>{test}</ul>
</Aux>
);
}
return (
<Aux>
<div className="bframe">
<div className="form" />
{result}
</div>
<Footer />
</Aux>
);
}
I was wondering if its possible to move everything before 'return' statement, preferable in a separate file. I tried making a functional component and passing props but im unable to do loops there. Any tips?

You can reduce your code to the following :
render() {
const { welcome, isReal } = this.state
return (
<Aux>
<div className="bframe">
<div className="form" />
{isReal &&
<Aux>
<h3>Title</h3>
<ul>
{Object.entries(welcome).map(([key, value]) =>
<li key={key}>
Word: "{key}" repeats: {value} times
</li>
)}
</ul>
</Aux>
}
</div>
<Footer />
</Aux>
);
}
Do not use var, by default use const and if you want to modify your variable, use let.
You can choose to render an element or not by using the inline if : &&.
Your function is also unnecessary as it can be replaced by inline JS.
Your map can also be reduce from : x.map(a => { return <div/> } to x.map(a => <div/>.
You can also use the key of each item as the React key since they all have to be unique anyway in your object.

Maybe something like the following
const Result = ({real, welcome}) => {
if (!real) return null;
const words = Object.entries(welcome).map(([key, value], index) => <li key={index}>
Word: "{key}" repeats: {value} times
</li>
);
return (
<Aux>
<h3>Title</h3>
<ul>{words}</ul>
</Aux>
);
}
class YourComponent extends React.Component {
// ...
render() {
const {isReal, welcome} = this.state;
return (
<Aux>
<div className="bframe">
<div className="form" />
<Result real={isReal} welcome={welcome}/>
</div>
<Footer />
</Aux>
);
}
}