Mixing
…props in react.js 16 [duplicate]
This question already has an answer here:
What do these three dots in React do?
16 answers
I don't really get what does {...props} do? I understand that you can 'unload' all the props easier this way, but what about a case that we don't have any props yet? for example, consider this code
const input = (props) =>{
let inputElement = null;
switch(props.inputtype) {
case('input'):
inputElement = <input className={classes.InputElement} {...props} />
break;
case('textarea'):
inputElement = <textarea className={classes.InputElement} {...props} />
break;
default:
inputElement = <input className={classes.InputElement} {...props} />;
}
return(
<div className={classes.Input}>
<label className={classes.Label}> {props.label} </label>
{inputElement}
</div>
);
}
What does ...props do in this case, because we don't have any components here this is a fresh new component, does it mean that when i reuse this component i cna give it any props i want?
javascript reactjs ecmascript-6
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
marked as duplicate by adiga, vsync javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 9:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
What do these three dots in React do?
16 answers
I don't really get what does {...props} do? I understand that you can 'unload' all the props easier this way, but what about a case that we don't have any props yet? for example, consider this code
const input = (props) =>{
let inputElement = null;
switch(props.inputtype) {
case('input'):
inputElement = <input className={classes.InputElement} {...props} />
break;
case('textarea'):
inputElement = <textarea className={classes.InputElement} {...props} />
break;
default:
inputElement = <input className={classes.InputElement} {...props} />;
}
return(
<div className={classes.Input}>
<label className={classes.Label}> {props.label} </label>
{inputElement}
</div>
);
}
What does ...props do in this case, because we don't have any components here this is a fresh new component, does it mean that when i reuse this component i cna give it any props i want?
javascript reactjs ecmascript-6
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
marked as duplicate by adiga, vsync javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 9:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42
add a comment |
This question already has an answer here:
What do these three dots in React do?
16 answers
I don't really get what does {...props} do? I understand that you can 'unload' all the props easier this way, but what about a case that we don't have any props yet? for example, consider this code
const input = (props) =>{
let inputElement = null;
switch(props.inputtype) {
case('input'):
inputElement = <input className={classes.InputElement} {...props} />
break;
case('textarea'):
inputElement = <textarea className={classes.InputElement} {...props} />
break;
default:
inputElement = <input className={classes.InputElement} {...props} />;
}
return(
<div className={classes.Input}>
<label className={classes.Label}> {props.label} </label>
{inputElement}
</div>
);
}
What does ...props do in this case, because we don't have any components here this is a fresh new component, does it mean that when i reuse this component i cna give it any props i want?
javascript reactjs ecmascript-6
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
This question already has an answer here:
What do these three dots in React do?
16 answers
I don't really get what does {...props} do? I understand that you can 'unload' all the props easier this way, but what about a case that we don't have any props yet? for example, consider this code
const input = (props) =>{
let inputElement = null;
switch(props.inputtype) {
case('input'):
inputElement = <input className={classes.InputElement} {...props} />
break;
case('textarea'):
inputElement = <textarea className={classes.InputElement} {...props} />
break;
default:
inputElement = <input className={classes.InputElement} {...props} />;
}
return(
<div className={classes.Input}>
<label className={classes.Label}> {props.label} </label>
{inputElement}
</div>
);
}
What does ...props do in this case, because we don't have any components here this is a fresh new component, does it mean that when i reuse this component i cna give it any props i want?
This question already has an answer here:
What do these three dots in React do?
16 answers
javascript reactjs ecmascript-6
javascript reactjs ecmascript-6
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
asked Nov 21 '18 at 9:32
TempAcct4StackTempAcct4Stack
204
204
marked as duplicate by adiga, vsync javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 9:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by adiga, vsync javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Nov 21 '18 at 9:42
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42
add a comment |
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42
add a comment |
2 Answers
2
active
oldest
votes
let's say
props = {
propA: 'a',
propB: 'B'
};
doing
<input className={classes.InputElement} {...props} />
is the same as
<input className={classes.InputElement} propA={'a'} propB={'B'} />
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
add a comment |
Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.
The name doesn’t even have to be {...props}. You can pass it any object.
For example, instead of the following:
class FavouriteEmployee extends Component {
render() {
return <Employee name=“Dave” location=“New York” />;
}
}
You could instead write:
class FavouriteEmployee extends Component {
render() {
const employeeDetails = {
name: “Dave”,
location: “New York”
};
return <Employee {...employeeDetails} />;
}
}
answered Nov 21 '18 at 9:54
SungailaSungaila
537
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
let's say
props = {
propA: 'a',
propB: 'B'
};
doing
<input className={classes.InputElement} {...props} />
is the same as
<input className={classes.InputElement} propA={'a'} propB={'B'} />
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
add a comment |
let's say
props = {
propA: 'a',
propB: 'B'
};
doing
<input className={classes.InputElement} {...props} />
is the same as
<input className={classes.InputElement} propA={'a'} propB={'B'} />
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
add a comment |
let's say
props = {
propA: 'a',
propB: 'B'
};
doing
<input className={classes.InputElement} {...props} />
is the same as
<input className={classes.InputElement} propA={'a'} propB={'B'} />
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
let's say
props = {
propA: 'a',
propB: 'B'
};
doing
<input className={classes.InputElement} {...props} />
is the same as
<input className={classes.InputElement} propA={'a'} propB={'B'} />
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
answered Nov 21 '18 at 9:37
jamesjayajamesjaya
657412
657412
add a comment |
add a comment |
Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.
The name doesn’t even have to be {...props}. You can pass it any object.
For example, instead of the following:
class FavouriteEmployee extends Component {
render() {
return <Employee name=“Dave” location=“New York” />;
}
}
You could instead write:
class FavouriteEmployee extends Component {
render() {
const employeeDetails = {
name: “Dave”,
location: “New York”
};
return <Employee {...employeeDetails} />;
}
}
answered Nov 21 '18 at 9:54
SungailaSungaila
537
add a comment |
Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.
The name doesn’t even have to be {...props}. You can pass it any object.
For example, instead of the following:
class FavouriteEmployee extends Component {
render() {
return <Employee name=“Dave” location=“New York” />;
}
}
You could instead write:
class FavouriteEmployee extends Component {
render() {
const employeeDetails = {
name: “Dave”,
location: “New York”
};
return <Employee {...employeeDetails} />;
}
}
answered Nov 21 '18 at 9:54
SungailaSungaila
537
add a comment |
Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.
The name doesn’t even have to be {...props}. You can pass it any object.
For example, instead of the following:
class FavouriteEmployee extends Component {
render() {
return <Employee name=“Dave” location=“New York” />;
}
}
You could instead write:
class FavouriteEmployee extends Component {
render() {
const employeeDetails = {
name: “Dave”,
location: “New York”
};
return <Employee {...employeeDetails} />;
}
}
answered Nov 21 '18 at 9:54
SungailaSungaila
537
Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.
The name doesn’t even have to be {...props}. You can pass it any object.
For example, instead of the following:
class FavouriteEmployee extends Component {
render() {
return <Employee name=“Dave” location=“New York” />;
}
}
You could instead write:
class FavouriteEmployee extends Component {
render() {
const employeeDetails = {
name: “Dave”,
location: “New York”
};
return <Employee {...employeeDetails} />;
}
}
answered Nov 21 '18 at 9:54
SungailaSungaila
537
edited Nov 21 '18 at 10:26
answered Nov 21 '18 at 9:54
SungailaSungaila
537
answered Nov 21 '18 at 9:54
SungailaSungaila
537
answered Nov 21 '18 at 9:54
SungailaSungaila
537
537
add a comment |
add a comment |
How much research effort is expected of Stack Overflow users?
– adiga
Nov 21 '18 at 9:42