pass props
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
pass props
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
pass props in react
/* PASSING THE PROPS to the 'Greeting' component */
const expression = 'Happy';
<Greeting statement='Hello' expression={expression}/> // statement and expression are the props (ie. arguments) we are passing to Greeting component
/* USING THE PROPS in the child component */
class Greeting extends Component {
render() {
return <h1>{this.props.statement} I am feeling {this.props.expression} today!</h1>;
}
}
how to pass props in react
const Header = (props) => {
return (
<header>
<h1>{props.title}</h1>
</header>
)
}
export default Header
pass component as props react
const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />
class component params in react
<input
type= "text"
value={ this.state.value || "" }
placeholder="Enter Name"
/>
pass component as props react
const Label = props => <span>{props.children}</span>
const Button = props => {
const Inner = props.inner; // Note: variable name _must_ start with a capital letter
return <button><Inner>Foo</Inner></button>
}
const Page = () => <Button inner={Label}/>
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us