display a text box inside my getStepContent method - html

Question

I am new to react and I am trying to learn react by using material-ui. I am trying to display a text box inside my getStepContent method. For each stepper I need to develop different ui, so I gave inside getStepContent method. But the problem is its displaying as html and I dont see anty errors. Can you tell me how to fix it. Providing my code below.
https://codesandbox.io/s/2okwnkoonn
function getStepContent(step) {
switch (step) {
case 0:
return `<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
/>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.`;
case 1:
return "An ad group contains one or more ads which target a shared set of keywords.";
case 2:
return `Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.`;
default:
return "Unknown step";
}
}

Answer 1

You are returning a string. What you want to do is returning JSX. However, you also need to pass along your classes and your state as well, as you are using them in your returned value.
In short, instead of wrapping everything in backticks, you do something like this.
function getStepContent(step) {
switch (step) {
case 0:
return (
<div>Step 0</div>
);
case 1:
return (
<div>Step 1</div>
);
case 2:
return (
<div>Step 2</div>
);
default:
return (
<div>Unknown step</div>
);
}
}
Don't forget, you also need to pass your function the state and classes as well, so you can use it like {classes.textField}.

Answer 2

You are missing the parenthesis: return ()
AND you are trying to return a string rather than JSX.
Also, when you are working with text boxes in HTML and React, you want the text to be enclosed by the text box tags.
<TextField>sample text</TextField>
Here is your desired format:
function getStepContent(step) {
switch (step) {
case 0:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
For each ad campaign that you create, you can control how much
you're willing to spend on clicks and conversions, which networks
and geographical locations you want your ads to show on, and more.
</TextField>
)
case 1:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
An ad group contains one or more ads which target a shared set of keywords.
</TextField>
)
case 2:
return (
<TextField
id="standard-name"
label="Name"
className={classes.textField}
value={this.state.name}
onChange={this.handleChange('name')}
margin="normal"
>
Try out different ad text to see what brings in the most customers,
and learn how to enhance your ads using features like ad extensions.
If you run into any problems with your ads, find out how to tell if
they're running and how to resolve approval issues.
</TextField>
)
default:
return (
<Text>Unknown step</Text>
)
}
}
However, I do want to stress that if you want to return that long of a string, you should put them in a constant variable!!
Also, if you want to make your code even prettier, you can put the TextField Component into a separate const function and return it!
const EXAMPLE_STRING = "food"
Hope this helped!
SYNTAX GUIDE
When you want to use the keyword this:
DO:
class Example {
example_function() {
this.state ....
}
}
DON'T
function example_function() {
this.state ... // ERROR
}
class Example {...}
When you do not want to face NULL pointer exception:
DO:
class Example {
constructor(props) {
this.state = {
name: 'initialize'
age: 0 // initialize
friends: [] // initialize
}
}
example_function() {
console.log(this.state.name) // will not crash because it is initialized
}
}
DON'T
class Example {
constructor(props) {
this.state = {
age: 0 // initialize
friends: [] // initialize
}
}
example_function() {
console.log(this.state.name) // CRASH because attribute name does not exist!!!
}
}