I am new in React. I want to hide and show some part of my code at the same time. From my below codes, on load only the "step_one" class should visible and "step_two" class should be hidden. Once I click on SUBMIT I want to hide the "step_one" part and "step_two" part should be visible. Please suggest me to achieve this. Thank you.
App.tsx:
interface IState {
cName: string;
cEmail: string;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
cName: '',
cEmail: ''
}
this.nameChange = this.nameChange.bind(this);
this.emailChange = this.emailChange.bind(this);
this.computeBmi = this.computeBmi.bind(this);
}
nameChange(nameValue) {
this.setState({ cName : nameValue });
}
emailChange(emailValue) {
this.setState({ cEmail : emailValue });
}
computeBmi() {
// some code here
}
render() {
return (
<div>
<div >
<TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
<TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
<MyButton label="SUBMIT" onClick={ this.computeBmi } />
</div>
<div >
// some code
</div>
</div>
)
}
}
export default App;
TextInput.tsx:
interface TIProps {
label?: any;
placeholder?: any;
onChange(inputValue: string): any;
}
interface TIState {
value: number;
error: string;
}
class TextInput extends React.Component<TIProps, TIState> {
constructor(props: TIProps) {
super(props);
this.state = {
value : 0,
error : ''
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let inputValue = event.target.value;
this.setState({ value : inputValue });
this.props.onChange(inputValue);
}
render() {
return(
<div>
<FormControl>
<TextField label={ this.props.label } type="text" placeholder={this.props.placeholder} onChange={this.handleChange} />
</FormControl>
</div>
)
}
}
export default TextInput;
MyButton.tsx:
interface BIProps {
label?: any;
variant?: any;
size?: any;
color?: any;
onClick: React.MouseEventHandler<HTMLButtonElement>;
}
interface BIState {
}
class MyButton extends React.Component<BIProps, BIState> {
render() {
return(
<button className="myButton" onClick={this.props.onClick}>
{this.props.label}
</button>
)
}
}
export default MyButton;
CodePudding user response:
this might solve your problem
interface IState {
cName: string;
cEmail: string;
step: number;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
cName: '',
cEmail: '',
step: 1,
}
this.nameChange = this.nameChange.bind(this);
this.emailChange = this.emailChange.bind(this);
this.computeBmi = this.computeBmi.bind(this);
}
nameChange(nameValue) {
this.setState({ cName : nameValue });
}
emailChange(emailValue) {
this.setState({ cEmail : emailValue });
}
computeBmi() {
this.setState({ step: 2 });
// some code here
}
render() {
return (
<div>
{
this.state.step === 1 && <div >
<TextInput label="Please confirm your full name?" placeholder="Your full name" onChange={this.nameChange} />
<TextInput label="Please confirm your email?" placeholder="Your Email ID" onChange={this.emailChange} />
<MyButton label="SUBMIT" onClick={ this.computeBmi } />
</div>
}
{
this.state.step === 2 && <div >
// some code
</div>
}
</div>
)
}
}
export default App;
CodePudding user response:
You could use a step
property in your props
, and use conditional rendering, like below:
interface IState {
cName: string;
cEmail: string;
step: 1 | 2;
}
class App extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props);
this.state = {
cName: "",
cEmail: "",
step: 1,
};
this.nameChange = this.nameChange.bind(this);
this.emailChange = this.emailChange.bind(this);
this.computeBmi = this.computeBmi.bind(this);
}
nameChange(nameValue) {
this.setState({ cName: nameValue });
}
emailChange(emailValue) {
this.setState({ cEmail: emailValue });
}
computeBmi(e) {
e.preventDefault();
// some code here
this.setState({ ...this.state, step: 2 });
}
render() {
return (
<div>
{this.step === 1 && (
<div >
<TextInput
label="Please confirm your full name?"
placeholder="Your full name"
onChange={this.nameChange}
/>
<TextInput
label="Please confirm your email?"
placeholder="Your Email ID"
onChange={this.emailChange}
/>
<MyButton label="SUBMIT" onClick={this.computeBmi} />
</div>
)}
{this.step == 2 && <div >// some code</div>}
</div>
);
}
}
export default App;
CodePudding user response:
You also can add an additional modifier class using the syntax of template literals . For example:
className={`todo ${todo.isCompleted ? 'todo--completed' : ''}`}