TodoListContainer is a styled component, So Inside this container, I would like to give style to the Footer component which I import from other places.
My goal is to access different Footer inside TodoListContainer and give different CSS styles.
It is straightforward to access the regular dom element, I have a hard time accessing customized component.
Thanks for the help!
const TodoListContainer = styled.div`
`
<TodoListContainer>
<input
className=" task-input"
aria-label="Create a new todo..."
type="text"
value={text}
placeholder="Create a new todo..."
onChange={handleChange}
onKeyDown={handleKeyDown}
/>
<ul>
{renderedListItems}
<li className="footer-section">
<span className="itemInfor">
{todosRemaining} item{suffix} left
</span>
<Footer />
<button
aria-label="Clear Completed"
className="clear-all-btn"
onClick={handleClearComplete}>
Clear Completed
</button>
</li>
</ul>
<Footer />
</TodoListContainer>
Related
import React from "react";
import noviceImg from "./resources/kull.jpg";
import female1 from "./resources/f1.png";
import female2 from "./resources/f2.png";
import male1 from "./resources/m1.png";
import male2 from "./resources/m2.png";
import kendi from "./resources/kendi.png";
import styles from "./Personel.module.css";
import {
Header,
Subheader,
Content,
kendisi
} from "./components/Personelcomponents";
import { MdBorderColor } from "react-icons/md";
import { pink } from "#material-ui/core/colors";
import Navbar from "../../components/Navbar/Navbar";
import useWindowSize from "../../hooks/useWindowSize";
import Not from "./Not";
import { Container } from "#material-ui/core";
import { connect } from "react-redux";
var DataisLoaded = false;
const mapStateToProps = (state) => ({
kimlikId: state?.account?.principal?.kimlikId,
sonucList: state?.account?.principal?.sonucList,
DataisLoaded: true
});
const Personel = ({ sonucList }) => {
if (!DataisLoaded)
return (
<div>
<h1> Pleses wait some time.... </h1>{" "}
</div>
);
return (
<div className={styles.root}>
<Navbar className={styles.navBar} />
<Not className={styles.not} />
<Content>
<div className={styles.card_k}>
<img alt="" src={kendi} />
<b>
<h4 className={styles.name}>İSİM</h4>
</b>
<p className={styles.cardtext}>
<br />
Baba Adı:
<br />
Yakınlık Derecesi: Kendisi
<br />
<div>
<button_k type="button">Randevu Al</button_k>
</div>
<div></div>
<br />
</p>
</div>
<div className={styles.card_f}>
<img alt="" src={female1} />
<h4 className={styles.name}>İSİM</h4>
<p class="card-text">
Ana Adı:{sonucList.sonucList[0].bireyAd}
<br />
Baba Adı:
<br />
Yakınlık Derecesi:
<br />
<button type="button">Randevu Al</button>
<div></div>
<br />
</p>
</div>
<div className={styles.card_f}>
<img alt="" src={female1} />
<h4 className={styles.name}>İSİM</h4>
<p class="card-text">
Ana Adı:
<br />
Baba Adı:
<br />
Yakınlık Derecesi:
<br />
<button type="button">Randevu Al</button>
<div></div>
<br />
</p>
</div>
<div className={styles.card_m}>
<img alt="" src={male2} />
<h4 className={styles.name}>İSİM</h4>
<p class="card-text">
Ana Adı:
<br />
Baba Adı:
<br />
Yakınlık Derecesi:
<br />
<div>
<button_m type="button">Randevu Al</button_m>
</div>
<div></div>
<br />
</p>
</div>
<div className={styles.characterBox}>
<h2>Sorceress</h2>
<img alt="" src={noviceImg} />
</div>
<div className={styles.characterBox}>
<h2>Sorceress</h2>
<img alt="" src={noviceImg} />
</div>
<div className={styles.characterBox}>
<h2>Sorceress</h2>
<img alt="" src={noviceImg} />
</div>
</Content>
</div>
);
};
export default connect(mapStateToProps)(Personel);
Sorry for the messy code. I'm kinda new to react and js and trying to bring some data from api but I have no idea what I'm doing really. I'm trying to copy other pages in project and they used mapStateProps and somehow I can bring my data (Sonuclist and KimlikId) from there but the problem is it page loaded without data and cause error. (After then it brings data from api and works normally) to prevent that I used if statement and DataisLoaded check but it doesn't return after the first if. Tried using states but apperantly you can do those in class comp only?
I'm trying to copy other pages in project and they used mapStateProps and somehow I can bring my data (Sonuclist and KimlikId) from there but the problem is it page loaded without data and cause error. (After then it brings data from api and works normally) to prevent that I used if statement and DataisLoaded check but it doesn't return after the first if.
First of all, I would suggest using useSelector instead of mapStateToProps.
I have not seen this approach before. mapStateToProps is (was) used in class components. For functional components we have the useSelector hook which does the exact same thing as mapStateToProps (well, without out of the box memoization, but that's out of this context).
It is highly recommended to use the hook, so I suggest you give it a try :)
Now, back to the issue:
I don't see how this can work at any point in time as it looks like you don't use DataisLoaded from your props, it is a completely different variable that has nothing to do with the actual store.
Try deleting var DataisLoaded = false; and do something like:
const Personel = ({ sonucList, DataisLoaded }) => {
Remember that data from your store will only be available this way. Nevertheless I still highly suggest you give useSelector a try.
Hope this helps :)
https://react-redux.js.org/api/hooks#useselector
I was creating React project and here is the component that I want to ensure that is put inside a string.
<InfoIcon
tooltip={`${hints.todoHint} <br/> ${hints.inProgressHint} <br/> ${hints.doneHint}`}
/>
but it is not working since br/ is literally rendered like br/
One option is to convert tooltip in to three props and add <br /> in the InfoIcon component. For example InfoIcon component can be
const InfoIcon = ({ todoHint, inProgressHint, doneHint }) => (
<div>
{todoHint}
<br />
{inProgressHint}
<br />
{doneHint}
</div>
);
// Using Info Icon
<InfoIcon todoHint={todoHint} inProgressHint={inProgressHint} doneHint={doneHint} />
Other option is to send tooltip as follows
const tooltip = (
<div>
{hints.todoHint}
<br />
{hints.inProgressHint}
<br />
{hints.doneHint}
</div>
)
<InfoIcon tooltip={tooltip} />
Well, material-ui tooltip allows you to use ANY kind of HTML content. => refer to official document customized tooltiops
This means you can use normal <div> and <Typography />, and any other styled elements to handle multi-line content.
The only thing you need to do is pass the content to props title => refer to document of tooltip api
import {
Tooltip,
Typography
} from '#material-ui/core';
<Tooltip
title={ // customized content here via props `title`
<>
<div>Seperate line</div>
<Typography>Seperate line</Typography>
</>
}
>
<IconButton aria-label="delete">
<InfoIcon /> // You can use your original icon here
</IconButton>
</Tooltip>
Watch it online: https://stackblitz.com/run
You can find related question here: How to make line break for ToolTip titles in Material-UI
I am trying to dynamically render a custom button component in a form in react js.
Here is my radio custom button component.
export class CustomRadio extends Component {
render() {
return (
<div>
<FormGroup>
<ControlLabel>{this.props.label}</ControlLabel>
<br />
<input type="radio" name={this.props.name} />
</FormGroup>
</div>
);
}
}
The below is how I call that component in a form
<CustomRadio label="status" />
Anyways I was not able to get the expected output. Can anyone help me out to solve this matter?
First thing, you must import your component as,
import {CustomRadio} from './CustomRadio'; //because you are exporting as named export
Another thing, as you are using this.props.name you must pass it as,
<CustomRadio label="Status" name="name"/>
By looking at FormGroup, I think you are using reactstrap, in reactstrap you can use this to get radio button,
<FormGroup>
<Label>
<input type="radio" name={this.props.name} />
{this.props.label}
</Label>
</FormGroup>
Demo
Note:
If ControlLabel is another custom component, then you can do this,
<FormGroup>
<ControlLabel>
<input type="radio" name={this.props.name} />
{this.props.label}
</ControlLabel>
</FormGroup>
And your ControlLabel component should be,
const ControlLabel = (props) => {
return (
<Label>{props.children}</Label>
)
}
As you have mentioned the name as a prop in CustomRadio component you must need to pass name also from here as follows:
<CustomRadio label="status" name="Xyz" />
I have the following code snippet, which doesn't display anything at all in the browser window. Can you please tell me why.
render(){
return (
<div>
//Rama
//console.log('In Render'),
<div>
enter code here
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField>Login Successful</TextField>
</div>
</div>
)
}
pastebin link for complete component: http://pastebin.com/etjUwvWT
To render material-ui components you need to wrap them in MuiThemeProvider.
As Per DOC:
Beginning with v0.15.0, Material-UI components require a theme to be
provided. The quickest way to get up and running is by using the
MuiThemeProvider to inject the theme into your application context.
How to use these components?
First use this line to import MuiThemeProvider :
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
Use this render method:
render(){
return (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<div>
<div>
<TextField
hintText="Username"
/>
<br/>
<TextField
hintText="Password"
/>
<br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField/>
</div>
</div>
</MuiThemeProvider>
);
}
If you are using material-ui components across the project then no need to use MuiThemeProvider on each page, you also include it globally. Include this in your router or put this line on main page of the application.
One more thing you are only importing the injectTapEventPlugin, you need to initialise that also. Put this line in this component after importing:
injectTapEventPlugin();
Looks like you're having JS-comments (//) in your JSX code. That'll make stuff break.
If you want to comment something out in JSX, you have to escape into JS with curly brackets and then use multi line comments (/* comment */) - like so:
render() {
return (
<div>
{/* <button>Commented out button</button>*/}
</div>
);
}
Remove text from between the TextField tags. Also wrap your code in your render method between MuiThemeProvider.
This worked for me.
render(){
return (
<MuiThemeProvider>
<div>
<div>
<TextField
hintText="Username"
/><br/>
<TextField
hintText="Password"
/><br/>
<RaisedButton label="Login" primary={true} />
</div>
<div>
<TextField></TextField>
</div>
</div>
</MuiThemeProvider>
);
}
As an FYI, so it is not the most obvious responses, but just in case this is your situation, my issue was that I had changed my Windows 10 personalise settings to use contrast and my blue bar in my React app disappeared! After a while of searching, I switched it off and my bar was back.
It's a trivial issue but I'm not seeing where the problem exactly lies.
As far as I know, React offers the ability to pull stuff apart into (somewhat) independent components which results in cleaner pages because not everything is crammed into one huge HTML file. Or so the philosophy goes, I think.
Basically, when I do this, everything works fine:
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/><br />
<TextField hintText="Passwort" type="password" ref="password_login" floatingLabelText="Passwort" /><br />
<RaisedButton label="Login" onTouchTap={e => this.handleLoginTap(e, dispatch)} />
<p>Zur <a href="javascript://" onTouchTap={e => this.handleShowRegisterTap(e, dispatch)}>Registration</a>.</p>
</div>
</Popover>
Which looks like this:
However, when I pull out the <div> into another module and then do something like this:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<LoginFragment />
</Popover>
where LoginFragment.jsx contains something like this:
var LoginFragment = React.createClass({
render() {
return (
<TextField hintText="Username oder E-Mail" ref="username_login" floatingLabelText="Username / E-Mail"/>
)
}
})
Which results in this hot mess:
So, what is going on here?
It can be a CSS styling issue, since you aren´t wrapping your fields inside a div anymore (and you are now skipping the loginStyle that was applied to this containing div.)
So, in the old version you had:
<Popover ...>
<div style={loginStyle}>
<TextField ...><br />
<TextField ...><br />
<RaisedButton .../>
<p>...</p>
</div>
</Popover>
But what you are including in your new version right now, using a single LoginFragment component, once expanded, would look like:
<Popover ...>
<TextField ...>
</Popover>
In this version, the wrapping divs (and their styling) would be missing. Including <div style={loginStyle}> in your code again would fix any CSS styling conflict, or help find and isolate the issue. Like so:
import LoginFragment from './loginBar/LoginFragment.jsx'
<Popover open={this.props.popover === LoginPopoverState.LOGIN}
anchorEl={this.props.anchorEl}
onRequestClose={this.handleHideLogin.bind(this, dispatch)}>
<div style={loginStyle}>
<LoginFragment />
</div>
</Popover>