When try assign a style to element, I recive the next error.
Error: Objects are not valid as a React child (found: object with keys {border, padding, whiteSpace, textOverflow, overflow, position, float, height, width}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Gridnamic`.
I tried use Object.assign, set the array inline style={{width: "45px"}} and doesnt work.
My array style is:
var styles = {
columns: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "200px"
},
columnSelect: {
border: "1px solid #ddd",
padding: "5px",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
overflow:"hidden",
position: "relative",
float: "left",
height: "45px",
width: "50px"
}
};
And my render method is:
return <div>
<p>{this.state.selected.length} seleccionados</p>
<div className="table-responsive">
<div style={styles.row}>
<div style={styles.rowContent}>
<div style={styles.columnSelect}><input type="checkbox" onClick={this.selectElement.bind(this)} className="selectAll"/></div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>{column.title}</div>
)}
</div>
</div>
<div style={styles.row}>
<div style={styles.rowContent}>
<div> style={styles.columnSelect}</div>
{this.state.columns.map(column =>
<div style={styles.columns} key={column.name}>
<input placeholder="Buscar" className="form-control" ref={'filter-'+column.name} name={column.name} onChange={this.filter.bind(this)} />
</div>
)}
</div>
</div>
</div>
<p>{this.state.rows.length} registros.</p>
</div>;
Thanks developers.
Chill
The issue is here: <div> style={styles.columnSelect}</div>. Probably meant to do <div style={styles.columnSelect}></div> .
Related
I have two react components.
List container
List
The list needs to be inside the list container. Like so:
<Container innerhtml={<List></List>} ></Container>
The content of both components renders. However the styling of the child is overridden by the parents styling. (In this case, the background color)
This is the full code:
import React from "react";
export default function main() {
return <div>
<Container
innerhtml={<List></List>}
></Container>
</div>
}
function List() {
return <div style={{ backgroundColor: "#red!important", height: "150px", width: "150px" }}>
this is a list
</div>
}
function Container(props) {
return <div style={{ backgroundColor: "#94e49d38", height: "400px", width: "100vw-10px" }}>
this is container
{props.innerhtml}
</div>
}
I think it may be a similar thing to this: Style not working for innerHTML in Angular
However I cant find a React equivalent.
How can I get the list style to work?
Thank you
By refactoring a bit your code I found this Solution:
export default function Main() {
return (
<div>
<Container>
<List></List>
</Container>
</div>
);
}
function List() {
return (
<div style={{ backgroundColor: "red", height: "150px", width: "150px" }}>
this is a list
</div>
);
}
function Container(props) {
return (
<div
style={{
backgroundColor: "#94e49d38",
height: "400px",
width: "100vw-10px"
}}
>
{props.children}
</div>
);
}
by passing props.childreninstead of innerHtml and by removing the "#" before red this works fine, see the sandbox
import React from "react";
export default function Main() {
return (
<div>
<Container>
<List/>
</Container>
</div>
}
function List() {
return (
<div style={{ backgroundColor: "#75e936", height: "150px", width: "150px" }}>
this is a list
</div>
}
function Container(props) {
return(
<div style={{ backgroundColor: "#94e49d38", height: "400px", width: "100vw-10px" }}>
this is container
{props.children}
</div>
)
}
You put hashtag which is not required.
Change from
backgroundColor: "#red !important"
to
backgroundColor: "red !important"
#red is an invalid property value. It should be red as shown below.
backgroundColor: " red !important"
I am trying to change classes of my component's div tag. But I get illegal invocation. Here's my code.
I don't know what I am doing wrong? I am new to react and javascript. I am trying to float my div with id of power to left or right conditionally like a toggle switch. I get the error when I click on the div. Not in the beginning.
let power = false;
let bank;
let target = document.getElementById;
function powerButton() {
power = !power;
if (power) {
target("power").className = "float-right";
} else {
target("power").className = "float-left";
}
}
class App extends React.Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
}
render() {
return (
<
<div
id="controls"
className=" d-inline-block float-right mt-5 text-center font-weight-bold "
style={{ marginRight: "40px" }}
>
<p style={{ margin: "0" }}>Power</p>
<div
onClick={powerButton}
className=" mx-auto"
style={{
width: "54px",
height: "24px",
padding: "2px",
backgroundColor: "black",
}}
>
<div
id="power"
style={{
backgroundColor: "blue",
width: "23px",
height: "19px",
border: "1px solid black",
}}
/>
</div>
<p
style={{
padding: "15px 0px",
width: "200px",
height: "45px",
lineHeight: "22px",
margin: "15px 0px ",
backgroundColor: "grey",
}}
>
AAA
</p>
<div style={{ marginBottom: "5px" }}>
<input style={{ color: "black" }} type="range" />
</div>
<p style={{ margin: "0" }}>Bank</p>
<div
className=" mx-auto"
style={{
width: "54px",
height: "24px",
padding: "2px",
backgroundColor: "black",
}}
>
<div
id="bank"
style={{
backgroundColor: "blue",
width: "23px",
height: "19px",
border: "1px solid black",
}}
/>
</div>
</div>
</div>
</div>
);
}
}
You have that error because you've lost the "context" of the function, I mean "document". To resolve this, use .bind in newer versions of Javascript:
if (power) {
target.bind(document)("power").className = "float-right";
} else {
target.bind(document)("power").className = "float-left";
}
The illegal invocation is because of wrong context i.e. getElementById is not being called by the document object. Also in React, do things via state updates and not direct DOM manipulation. You first need to understand core JavaScript concepts and learn React concepts from documentation.
I've connected to a websocket and pull real-time data from the server once the page is loaded. However, I want it to load from the bottom-up and not from the top-down of the div. I'm hoping I can keep it scrolled to the bottom of the div unless the user scrolls up in this case.
Here's what I'm currently working with
(I'm planning to also pull more data from their REST API and preload the div with 100-50 messages prior so the user doesn't see nothing upon the initial page load. Though, I'm sure that'll be another question 😂)
I've tried using
display: 'flex', flexDirection: 'column-reverse'
but that alone doesn't seem to be the solution in this case. overflow? I'm not sure
Here is the parent .js file that the component is within:
<Layout style={{ minHeight: '100vh' }}>
<div style={{width: '100%', height: '100%'}}>
<Header id="header">
</Header>
<Content style={{ padding: '24px 50px 0px 50px' }}>
<div style={{ borderRadius: '6px', border: '1px solid rgb(235, 237, 240)', background: '#fff'}}>
<Tbox/>
</div>
</Content>
<Footer/>
</div>
</Layout>
And then here is the component itself:
render() {
const chatBox =
<List
dataSource={this.state.data}
renderItem={item => (
<List.Item >
<List.Item.Meta
avatar={<Avatar size="large" icon="user" />}
title={<div>{item.user} {item.date}</div>}
description={item.message}
/>
</List.Item>
)}
/>;
return (
<div>
<div style={{ height: 400 }}>
<Scrollbars style={{ height: 400 }}>
<section style={{display: 'flex !important', flexDirection: 'columnReverse !important' }}>
<div>
{chatBox}
</div>
</section>
</Scrollbars>
</div>
<div style={{ width: '100%', padding: 0 }}>
...
</div>
</div>
);
}
As mentioned before by Daan, if you can post the result page, it would help since after that the CSS rule can be applied to the result list. Take look at this
how-to-display-a-reverse-ordered-list-in-html
Hope this could help
I want to implement a navbar like component in reactjs. but pesudo-classes(:hover) for css seem not to be supported by react(css-in-js). I try the another way out to solve the problem using li and state control.
Another problem for this solution is that i can't ripped off the unordered bullet list using display:inline-block or list-style:none because it make the sub-menu items to be disappear when moving my pointer down to them.I am using material-ui/core as UI libraryAn example of my code:
showMenu = () =>{
this.setState({showMenu: true});
}
hideMenu = () =>{
this.setState({showMenu: false});
}
html, css
dropdownMenu:{
position: "absolute",
fontSize: "0.9rem",
marginTop: 0,
right: 15,
left: "auto",
top: "63px",
backgroundColor:"white",
border:"1px solid #D9E4E3",
boxShadow: "0px 3px 21px 0px rgba(0, 0, 0, 0.2)",
animationDuration: "0.25s",
animationFillMode: "both",
},
<div>
<li onMouseLeave={this.hideMenu}>
<div className={classes.sectionDesktop} onMouseEnter={this.showMenu}>
<Avatar style={{backgroundColor: "transparent"}}><Icon>account_circle</Icon></Avatar>
<span style={{fontWeight: 500, margin: "0px .5rem", lineHeight: "40px"}}>Louis Barnett</span>
</div>
{this.state.showMenu &&
<div className={classes.dropdownMenu} >
<SideMenuItem label="My Profile" icon={this.renderIcon('person')} onClick={() => this.handleMenuClick("/me")}/>
<SideMenuItem label="Settings" icon={this.renderIcon('settings')} />
<SideMenuItem label="Logout" icon={this.renderIcon('exit_to_app')} onClick={this.handleSignoutClick}/>
</div>
}
</li>
</div>
SideMenuItem Component
render() {
const selected = this.props.location.pathname === this.props.path;
return(
<ListItem button dense selected={selected} onClick={this.handleOnClick}>
<ListItemIcon>
{this.props.open || !this.props.label ? this.props.icon : <Tooltip title={this.props.label}>{this.props.icon}</Tooltip>}
</ListItemIcon>
<ListItemText primary={this.props.label}/>
</ListItem>
);
}
Hello mate the :hover styling should work in this case. Just try specifying it in a style-sheet instead of inline style.
Sample code
yourCssFile.css
.my-button {
background-color: yellow;
}
In your component
import './path_to_css/yourCssFile.css';
In the button
<button class="my-button">Click me</button>
This will apply your styles for your button. Similarly you can try out hover.Check out the reference!
I am trying to add a css property in div. How can i pass margin-left: 2px in following div?
(<div style={{width: `${widthValue}%`}} key = {i}>
<progress
{...customProps}
style={{ color: group.color }}
className={classes}
max={100}
value={100}
aria-valuemax={100}
aria-valuemin={0}
aria-valuenow={widthValue}
tabIndex="-1"
/>
</div>);
Use inline styles and camelCase.
style={{ marginLeft: 2 }}
Note: Default unit is px.