CODEWITHSUNDEEP
node.jsmaterial-ui
Sijan Bhandari
Sijan Bhandari

Reputation: 3051

Material UI text input field inside Appbar not working

I am trying to insert two text input fields for username and password at the right of Appbar with following code. But it doesn't give the any output.

const AppBarExampleIconMenu = () => ( < AppBar title = { < span style = { styles.title } > Test < /span>}
            iconElementLeft = { < IconButton > < NavigationClose / > < /IconButton>}
                iconElementRight = { < div >
                    < TextField
                    hintText = "UserName" / >
                     < TextField
                    hintText = "PassWord" / >
                    < /div>
                }

                />
            );

Upvotes: 1

Views: 1184

Answers (1)

JFAP
JFAP

Reputation: 3727

Try this now. This is tested and proven working. Take note that this is written in ES6 style.

class Test extends React.Component {
    constructor(props) {
        super(props); 
    }

    render() {
        return (
            <MuiThemeProvider>
                <AppBar
                    title={"Title"}
                    iconElementLeft={<IconButton iconClassName="muidocs-icon-custom-github" />}
                    iconElementRight={
                        <div>
                            <TextField
                                hintText="Username"
                            />
                            <TextField
                                hintText="Password"
                            />
                        </div>
                    }
                />

            </MuiThemeProvider>
        )
    }
}

Upvotes: 3

Related Questions