React.js Component not being created
1
I have an array of objects I wanted to display in a table.
I have the following code
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
<Test/>
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
The console.log() in the Table prints out all my data correctly, however, the console.log() in my Test constructor never prints.
Why is the Test not being created?
My proper rows is below:
class Rows extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.rowData
};
console.log("2");
}
render() {
return (
<tr>
<td>{this.state.data.paymentFrom}</td>
<td>{this.state.data.paymentTo}</td>
<td>{this.state.data.paymentPeriod}</td>
<td>{this.state.data.paymentAmount}</td>
</tr>
);
}
}
javascript reactjs
asked Nov 24 '18 at 4:42
ScylScyl
183
add a comment |
1
I have an array of objects I wanted to display in a table.
I have the following code
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
<Test/>
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
The console.log() in the Table prints out all my data correctly, however, the console.log() in my Test constructor never prints.
Why is the Test not being created?
My proper rows is below:
class Rows extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.rowData
};
console.log("2");
}
render() {
return (
<tr>
<td>{this.state.data.paymentFrom}</td>
<td>{this.state.data.paymentTo}</td>
<td>{this.state.data.paymentPeriod}</td>
<td>{this.state.data.paymentAmount}</td>
</tr>
);
}
}
javascript reactjs
asked Nov 24 '18 at 4:42
ScylScyl
183
add a comment |
1
1
1
I have an array of objects I wanted to display in a table.
I have the following code
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
<Test/>
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
The console.log() in the Table prints out all my data correctly, however, the console.log() in my Test constructor never prints.
Why is the Test not being created?
My proper rows is below:
class Rows extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.rowData
};
console.log("2");
}
render() {
return (
<tr>
<td>{this.state.data.paymentFrom}</td>
<td>{this.state.data.paymentTo}</td>
<td>{this.state.data.paymentPeriod}</td>
<td>{this.state.data.paymentAmount}</td>
</tr>
);
}
}
javascript reactjs
asked Nov 24 '18 at 4:42
ScylScyl
183
I have an array of objects I wanted to display in a table.
I have the following code
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
<Test/>
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
The console.log() in the Table prints out all my data correctly, however, the console.log() in my Test constructor never prints.
Why is the Test not being created?
My proper rows is below:
class Rows extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.rowData
};
console.log("2");
}
render() {
return (
<tr>
<td>{this.state.data.paymentFrom}</td>
<td>{this.state.data.paymentTo}</td>
<td>{this.state.data.paymentPeriod}</td>
<td>{this.state.data.paymentAmount}</td>
</tr>
);
}
}
javascript reactjs
javascript reactjs
asked Nov 24 '18 at 4:42
ScylScyl
183
asked Nov 24 '18 at 4:42
ScylScyl
183
asked Nov 24 '18 at 4:42
ScylScyl
183
asked Nov 24 '18 at 4:42
ScylScyl
183
asked Nov 24 '18 at 4:42
ScylScyl
183
183
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.
Try this way:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
return (<Test/>)
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
add a comment |
1
You need to return <Test/> for it to initiate and render.
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
The extra return is not forReactbut for the.mapmethod. That's how.mapworks in js. You have to return from with.map()method. If you don't, it won't be part of the new array constructed by.map.
– Dinesh Pandiyan
Nov 24 '18 at 5:45
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%2f53455201%2freact-js-component-not-being-created%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
2
For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.
Try this way:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
return (<Test/>)
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
add a comment |
2
For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.
Try this way:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
return (<Test/>)
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
add a comment |
2
2
2
For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.
Try this way:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
return (<Test/>)
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
For the Test component to be rendered correctly, you must to return the component, if it never return on the function body, will never gonna print.
Try this way:
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
data: this.props.data
};
}
render() {
return (
<table>
{this.state.data.map(row => {
console.log(row);
return (<Test/>)
})}
</table>
);
}
}
class Test extends React.Component {
constructor(props) {
super(props);
console.log("7");
}
render() {
return;
}
}
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
answered Nov 24 '18 at 4:50
Alejandro LaricciaAlejandro Lariccia
1392
1392
add a comment |
add a comment |
1
You need to return <Test/> for it to initiate and render.
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
The extra return is not forReactbut for the.mapmethod. That's how.mapworks in js. You have to return from with.map()method. If you don't, it won't be part of the new array constructed by.map.
– Dinesh Pandiyan
Nov 24 '18 at 5:45
add a comment |
1
You need to return <Test/> for it to initiate and render.
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
The extra return is not forReactbut for the.mapmethod. That's how.mapworks in js. You have to return from with.map()method. If you don't, it won't be part of the new array constructed by.map.
– Dinesh Pandiyan
Nov 24 '18 at 5:45
add a comment |
1
1
1
You need to return <Test/> for it to initiate and render.
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
You need to return <Test/> for it to initiate and render.
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
answered Nov 24 '18 at 4:47
Andy RayAndy Ray
17.7k76298
17.7k76298
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
The extra return is not forReactbut for the.mapmethod. That's how.mapworks in js. You have to return from with.map()method. If you don't, it won't be part of the new array constructed by.map.
– Dinesh Pandiyan
Nov 24 '18 at 5:45
add a comment |
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
The extra return is not forReactbut for the.mapmethod. That's how.mapworks in js. You have to return from with.map()method. If you don't, it won't be part of the new array constructed by.map.
– Dinesh Pandiyan
Nov 24 '18 at 5:45
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
Doesn't seem to work, that whole section is inside a return already.
– Scyl
Nov 24 '18 at 4:56
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
This answer is correct, but if you aren't seeing logging, then you aren't passing data to your Table as props. You don't show us that code.
– Andy Ray
Nov 24 '18 at 4:59
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
you are correct, I was testing the wrong version. Why is an extra return needed?
– Scyl
Nov 24 '18 at 5:06
1
1
The extra return is not for
React but for the .map method. That's how .map works in js. You have to return from with .map() method. If you don't, it won't be part of the new array constructed by .map.– Dinesh Pandiyan
Nov 24 '18 at 5:45
The extra return is not for
React but for the .map method. That's how .map works in js. You have to return from with .map() method. If you don't, it won't be part of the new array constructed by .map.– Dinesh Pandiyan
Nov 24 '18 at 5:45
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%2f53455201%2freact-js-component-not-being-created%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
