Wrapping code inside styled component in React.js yields unexpected results on show password button click - styled-components

Question

App.js:
import './App.css';
import React, { Component } from 'react'
import Register from './Components/Register';
import Greet from './Components/Greet';
class App extends Component {
constructor(props) {
super(props)
this.state = {
isRegistered: false,
name: null,
email: null,
password: null,
showPass:false,
}
}
registerHandler=(e) => {
e.preventDefault();
const name = e.target.name.value;
const email = e.target.email.value;
const password = e.target.password.value;
this.setState({ isRegistered: true,name,email,password});
}
showPassHandler=()=>{
this.setState({showPass:!(this.state.showPass)});
}
render() {
return (
<div>
{this.state.isRegistered?<Greet name={this.state.name} email={this.state.email}/>:<Register submit={this.registerHandler} click ={this.showPassHandler} showPass={this.state.showPass}/>}
</div>
)
}
}
export default App;
/////////////////////////////////////////////////////////////
Register.js:
import React,{useState} from 'react'
import Styled from "styled-components";
export default function Register(props) {
const btnStyle={
backgroundColor:"red",
color:"white",
}
// const savePassword=(val)=>{
// show=val.target.value;
// val.target.value=show;
// inputRef.current.focus();
// val.target.focus();
// console.log(show);
// setPass(show);
// }
// console.log(show);
let btnText;
const btnClasses = ["btn","m-1","mt-2"];
if(props.showPass===true)
{
btnStyle.backgroundColor = "green";
btnText="hide password";
btnClasses.push("btn-primary");
}
else{
btnText="show password";
btnClasses.push("btn-danger");
}
const StyledButton = Styled.button
`
background-color: ${(props)=>props.bgColor};
color: white;
display:${(props)=>props.flag==="1"?"inline-block":"block"};
width:${(props)=>props.flag==="1"?"45%":"100%"};
margin:5px;
`
const StyledRegisterContainer = Styled.div`
width:600px;
&:hover {box-shadow:0px 0px 5px grey};
#media (min-width:0px) and (max-width:600px) {
width:300px;
};
`;
//register-container=> was class inside most outer div
return (
<StyledRegisterContainer className='container card mt-4 p-3 '>
<h1 className='text-center'>
Registration Form
</h1>
<form onSubmit={props.submit}>
<div className='form-group'>
<label className='control-label' htmlFor='name'>Name:</label>
<input type='text' name='name' className='form-control'/>
</div>
<div className='form-group'>
<label className='control-label' htmlFor='email'>Email:</label>
<input type='email' name='email' className='form-control'/>
</div>
<div className='form-group'>
<label className='control-label' htmlFor='password'>password:</label>
<input type={props.showPass?"text":"password"} name='password' required className='form-control' />
</div>
<button type='submit' className='btn btn-primary mt-2 m-1'>
Register
</button>
<button type ="button" className={btnClasses.join(" ")} onClick={props.click}>
{btnText}
</button>
<br/>
<StyledButton flag="1" bgColor="orange">Login</StyledButton>
<StyledButton flag="1" bgColor="blue">Login</StyledButton>
<StyledButton flag="0" bgColor="brown">Login</StyledButton>
</form>
</StyledRegisterContainer>
)
}
//style = {btnStyle}//it was inside button =>show password
inside Register.js file everything was working perfect but when I wrapped the code inside StyledRegisterContainer(a styled component) the functionality of show password button is disturbed and the moment I click on show password button the text from input box disapears.
I want my code to work even after wrapping it inside the above mentioned styled component.

Answer 1

I am not familiar with styled-components, but according to their documentation, it seems like you're importing Styled instead of styled
import styled from 'styled-components';
https://styled-components.com/docs/basics#installation