How to add dynamic div , react js
1
I try to create multiple dives from an object that contains 9 arrays, each array contains different coordinates, and my goal is to create a div for each array and display them on the screen according to their coordinates.
This is what I did :
class Boxes extends Component {
createBox = (box) => {
if(box !== undefined) {
console.log('box :', box);
return <div className='bounding-box'> <h1>Test</h1></div>
}
}
createBoxes = (boxes) => {
for (let index = 0; index < boxes.length; index++) {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
this.createBox(box);
}
}
render() {
return (
<div>
{this.createBox(this.createBoxes(this.props.box))}
</div>
);
}
}
export default Boxes;
The variable this.props.box contains the object with the arrays
What I did was go through the object, and send each array to a function that would create a div for it
But it does not make me any div.
I'll be happy to understand where my mistake is, what am I not doing right?
Thank you
javascript html reactjs
edited Nov 25 '18 at 16:11
zeduke
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
add a comment |
1
I try to create multiple dives from an object that contains 9 arrays, each array contains different coordinates, and my goal is to create a div for each array and display them on the screen according to their coordinates.
This is what I did :
class Boxes extends Component {
createBox = (box) => {
if(box !== undefined) {
console.log('box :', box);
return <div className='bounding-box'> <h1>Test</h1></div>
}
}
createBoxes = (boxes) => {
for (let index = 0; index < boxes.length; index++) {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
this.createBox(box);
}
}
render() {
return (
<div>
{this.createBox(this.createBoxes(this.props.box))}
</div>
);
}
}
export default Boxes;
The variable this.props.box contains the object with the arrays
What I did was go through the object, and send each array to a function that would create a div for it
But it does not make me any div.
I'll be happy to understand where my mistake is, what am I not doing right?
Thank you
javascript html reactjs
edited Nov 25 '18 at 16:11
zeduke
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
Probably give yourdivaclassNameand not anid
– Ajay Gaur
Nov 25 '18 at 14:02
Also you're not returning anything from yourcreateBoxesfunction
– Ajay Gaur
Nov 25 '18 at 14:03
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38
add a comment |
1
1
1
0
I try to create multiple dives from an object that contains 9 arrays, each array contains different coordinates, and my goal is to create a div for each array and display them on the screen according to their coordinates.
This is what I did :
class Boxes extends Component {
createBox = (box) => {
if(box !== undefined) {
console.log('box :', box);
return <div className='bounding-box'> <h1>Test</h1></div>
}
}
createBoxes = (boxes) => {
for (let index = 0; index < boxes.length; index++) {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
this.createBox(box);
}
}
render() {
return (
<div>
{this.createBox(this.createBoxes(this.props.box))}
</div>
);
}
}
export default Boxes;
The variable this.props.box contains the object with the arrays
What I did was go through the object, and send each array to a function that would create a div for it
But it does not make me any div.
I'll be happy to understand where my mistake is, what am I not doing right?
Thank you
javascript html reactjs
edited Nov 25 '18 at 16:11
zeduke
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
I try to create multiple dives from an object that contains 9 arrays, each array contains different coordinates, and my goal is to create a div for each array and display them on the screen according to their coordinates.
This is what I did :
class Boxes extends Component {
createBox = (box) => {
if(box !== undefined) {
console.log('box :', box);
return <div className='bounding-box'> <h1>Test</h1></div>
}
}
createBoxes = (boxes) => {
for (let index = 0; index < boxes.length; index++) {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
this.createBox(box);
}
}
render() {
return (
<div>
{this.createBox(this.createBoxes(this.props.box))}
</div>
);
}
}
export default Boxes;
The variable this.props.box contains the object with the arrays
What I did was go through the object, and send each array to a function that would create a div for it
But it does not make me any div.
I'll be happy to understand where my mistake is, what am I not doing right?
Thank you
javascript html reactjs
javascript html reactjs
edited Nov 25 '18 at 16:11
zeduke
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
edited Nov 25 '18 at 16:11
zeduke
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
edited Nov 25 '18 at 16:11
zeduke
8518
edited Nov 25 '18 at 16:11
zeduke
8518
edited Nov 25 '18 at 16:11
zeduke
8518
8518
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
asked Nov 25 '18 at 14:00
Amos GuettaAmos Guetta
83
83
Probably give yourdivaclassNameand not anid
– Ajay Gaur
Nov 25 '18 at 14:02
Also you're not returning anything from yourcreateBoxesfunction
– Ajay Gaur
Nov 25 '18 at 14:03
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38
add a comment |
Probably give yourdivaclassNameand not anid
– Ajay Gaur
Nov 25 '18 at 14:02
Also you're not returning anything from yourcreateBoxesfunction
– Ajay Gaur
Nov 25 '18 at 14:03
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38
Probably give your
div a className and not an id– Ajay Gaur
Nov 25 '18 at 14:02
Probably give your
div a className and not an id– Ajay Gaur
Nov 25 '18 at 14:02
Also you're not returning anything from your
createBoxes function– Ajay Gaur
Nov 25 '18 at 14:03
Also you're not returning anything from your
createBoxes function– Ajay Gaur
Nov 25 '18 at 14:03
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38
add a comment |
2 Answers
2
active
oldest
votes
0
createBoxes function does not return anything, so passing it as parameter to createBox function does not work.
Also you should assign a unique id to each div element, so I added an index parameter to createBox function.
And I changed the name of props.box to props.boxes, which is more accurate.
Consider using something like following code:
class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
add a comment |
0
I have created a solution for the same. Hope this helps. Check this CodeSandbox
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53468240%2fhow-to-add-dynamic-div-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
createBoxes function does not return anything, so passing it as parameter to createBox function does not work.
Also you should assign a unique id to each div element, so I added an index parameter to createBox function.
And I changed the name of props.box to props.boxes, which is more accurate.
Consider using something like following code:
class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
add a comment |
0
createBoxes function does not return anything, so passing it as parameter to createBox function does not work.
Also you should assign a unique id to each div element, so I added an index parameter to createBox function.
And I changed the name of props.box to props.boxes, which is more accurate.
Consider using something like following code:
class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
add a comment |
0
0
0
createBoxes function does not return anything, so passing it as parameter to createBox function does not work.
Also you should assign a unique id to each div element, so I added an index parameter to createBox function.
And I changed the name of props.box to props.boxes, which is more accurate.
Consider using something like following code:
class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
createBoxes function does not return anything, so passing it as parameter to createBox function does not work.
Also you should assign a unique id to each div element, so I added an index parameter to createBox function.
And I changed the name of props.box to props.boxes, which is more accurate.
Consider using something like following code:
class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>class Boxes extends Component {
createBox = (box, index) => {
if(box !== undefined) {
console.log('box :', box);
return <div id={"bounding-box-" + index}>box ${index}</div>
}
}
createBoxes = (boxes) =>{
return boxes.map((box, index) => {
let box = {
x1: boxes[index].x1,
y1: boxes[index].y1,
x2: boxes[index].x2,
y2:boxes[index].y2
}
return this.createBox(box, index);
})
}
render() {
return (
<div>
{this.createBoxes(this.props.boxes)}
</div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
edited Nov 25 '18 at 14:59
answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
answered Nov 25 '18 at 14:17
saman.shahmohamadisaman.shahmohamadi
375219
375219
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
add a comment |
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
hi, thank you. but this code does not working, it just create the first div (id=bounding-box-0). and that all.
– Amos Guetta
Nov 25 '18 at 14:30
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
My bad, there was an extra return phrase. I edited the code, working example here
– saman.shahmohamadi
Nov 25 '18 at 15:01
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
Thank you very much!
– Amos Guetta
Nov 25 '18 at 15:41
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
You're welcome :) could you please upvote the accepted answer?
– saman.shahmohamadi
Nov 26 '18 at 8:27
add a comment |
0
I have created a solution for the same. Hope this helps. Check this CodeSandbox
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
add a comment |
0
I have created a solution for the same. Hope this helps. Check this CodeSandbox
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
add a comment |
0
0
0
I have created a solution for the same. Hope this helps. Check this CodeSandbox
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
I have created a solution for the same. Hope this helps. Check this CodeSandbox
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
answered Nov 25 '18 at 15:36
klvenkyklvenky
134212
134212
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
add a comment |
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
thank you! this help me
– Amos Guetta
Nov 25 '18 at 17:05
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
@AmosGuetta please upvote the answer so that anyone with same problem can find it quick in future
– klvenky
Nov 26 '18 at 3:43
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53468240%2fhow-to-add-dynamic-div-react-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Probably give your
divaclassNameand not anid– Ajay Gaur
Nov 25 '18 at 14:02
Also you're not returning anything from your
createBoxesfunction– Ajay Gaur
Nov 25 '18 at 14:03
i return from this function one div : <div className='bounding-box'> <h1>Test</h1></div> but when i run it, i dont see this div
– Amos Guetta
Nov 25 '18 at 14:17
@AmosGuetta issues with your code are not returning anything from createBoxes and also returning nothing in case of box being undefined. In that case, return a null so that react doesn't render that :). Check my answer for a working example
– klvenky
Nov 25 '18 at 15:38