I have an array of addresses which i have mapped to a list and then rendered on the screen. The issue I am finding is that when the app is deployed it only seems to work on some peoples machines and not others. A few of us have tested on chrome and i cant see the list while others can. While i can not visibly see the list I can still click a selected address so the array is there but it is just no visible.
Below is my code to render the list
$('#addressDropddown').show();
const listItems = this.addresses.map((list) =>{
return(
<li>
<p className="addressListButtons" onClick={()=>this.myFunction(myObj, list)}>{list}</p>
</li>
)
})
//Render the button listdocument.
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('addressDropddown'));
it is then rendered to the below div
<MDBRow>
<MDBCol size="3" />
<MDBCol lg="5" md="12" className="title-left">
<MDBAnimation className="ex3" id="addressDropddown" type="fadeIn">
<div className="ex3" />
</MDBAnimation>
</MDBCol>
<MDBCol size="3" />
</MDBRow>
i have attached two images of the results on 2 separate pcs. i see the list in one and not the other.
Results Not Visible
Results Visible
The issue was that when rendering styling within a component and not through the css it will only be allowed on some browsers and not others.
e.g.
document.getElementById("authorisationCheckboxText").style.color = "#ff0000";
Related
I am using a React functional component with ternary to toggle a show more feature. I would additionally like the following logic: if one of the toggles is true (showing more), then the others are false (not showing). Right now, they just stack on top of each other unless you specifically click the button for each to "off" again.
This is them in initial state:
const [showFirst, setShowFirst] = useState(false)
const [showSecond, setShowSecond] = useState(false)
Here's the login in the render to show one of the 'show mores':
<button
className="btn-show"
onClick={() => setShowFirst(!showFirst)}>
<p className="proj-name">86 List</p>
</button>
Here's how it displays in its proper place:
{showFirst ? (
<div className="hide-me">
<p className="proj-lang">Built with: React.js, Ruby on Rails, Postgresql, CSS</p>
<p className="proj-desc">86List is a community for service-industry professionals to talk about the clients that they serve. Built with Ruby on Rails and React.js, 86List requires login authentication and registration in order to view and interact with co-workers' posts. In future iterations, I want to allow users to create their own accounts and request to be a part of a community with a community leader's approval.</p>
<img className="proj-img" src="/assets/86list.png" alt="" />
<div className="proj-link-container">
<a className="proj-link" href="https://github.com/aawferris/86list" target="_blank" rel="noreferrer" alt="this repo's github">REPO</a>
<a className="proj-link" href="https://86list.netlify.app/" target="_blank" rel="noreferrer" alt="live site for this link">SITE</a>
</div>
</div>
) : (
<div></div>
)}
I have tried making a handleClick that would toggle each back to false and the current one true, but it didn't work. Here's an example:
const handleFirst = () => {
setShowFirst(!showFirst)
setShowSecond(showSecond)
}
Thanks in advance!
Andy
The Idea would be to have an array of objects where you have an attribute like
showMore: true/false and also some sort of an id like id: 1. Each time one of the buttons is clicked, you iterate over the array (which should be a state in the parent component), you set the showMore attribute of that clicked button to true and set all the other ones to false. Then you just set that array as your new State.
This question already has answers here:
Understanding unique keys for array children in React.js
(27 answers)
Closed 2 years ago.
I'm learning React and I am having this issue. I've already looked at several stack posts but so far they are not helping me. The issue is, I am 100% positive that my items have a unique key. They are coming from a database, and the primary key DB value is being used in the "key=" attribute. The only possible way they could not be unique is if React is trying to render the array more than once.
I added a wrapper <div> so I could debug out the values so that I could visually ascertain my ids/keys were unique.
Here is my Project.jsx export. In this case, the Project element is a styled.div, but I have tried just a regular div too.
export default ({ project }) => (
<div key={project.id}>
<!-- DEBUG -->
<span>id: {project.id}; name: {project.name}</span>
<!-- /DEBUG -->
<Project>
<NavLink to={`/projects/${project.id}`}>{`${project.name}`}</NavLink>
</Project>
</div>
)
And it is called from my Projects.jsx, like this (there's more to the template, but this is the relevant bit):
<div className="projects">
<Title />
<div className="card">
{
projectList.map(project => (<Project project={project} />))
}
</div>
</div>
Here is a screenshot of the array projectList:
chrome devtools logging out projectList, you can see that each element has as unique "id" property.
Things I have tried:
using React.fragment https://github.com/facebook/react/issues/15620
moving "key=" to the topmost element (it was there already when Project was the topmost element, but I moved it when I added the debugging out div): (closed the link and can't find it :( )
using key={Math.Random()}, which still produced these errors, but it didn't print the list twice or anything
The site still seems to work fine, the links work and everything, it's just a big ugly error in the console (and since this is for a resume, I really don't want any of that!!).
Can someone please help?
you need to provide a key at the highest level in your map, which is your Project component
<div className="projects">
<Title />
<div className="card">
{
projectList.map(project => (<Project project={project} key={project.id}/>))
}
</div>
</div>
I'm working with lists that will likely be in the range of 500 up to maybe 5000 items. Each item in the list will show as a component, like so:
List
render() {
return (
<div className="ItemList">
<Info items={this.props.items} />
<ul>
{this.props.items.map( item =>
<Item item={item} key={item._id} refresh={this.props.refresh} />
)}
</ul>
</div>
);
}
Item
render() {
var item = this.props.item;
return (
<li onClick={() => this.setState({showInfo: !this.state.showInfo})}
className="Item">
<h3 className={this.state.showInfo ? "item-title-bar active" : "item-title-bar"}>
<div>
<div className="item-category">
{item.category}
</div>
<div className="item-name">
{item.name}
</div>
</div>
</h3>
{this.state.showInfo &&
<ItemInfo item={this.props.item} refresh={this.props.refresh} />
}
</li>
);
}
Once one of these lists gets up to around 1000 items, it's noticeably slow when I click to show a different list. Perf tools are showing me 90-150 ms for displaying this list at 1000 or 2000 items. Not sure I can get around that as long as I'm rendering them.
So, what I'm trying to do:
Can I let the initial items update, then render others in the background, while the app remains responsive?
How can I show initial items, then load more as the user scrolls down the page?
If neither option works, I'll probably try to load a few, then add a show more or show all button at the bottom of the list. Want to make this as seamless as possible though, open to other suggestions as well.
react-virtualized would be my first choice when dealing with a virtual list. Lot of examples here: https://bvaughn.github.io/react-virtualized/#/components/List
Pretty simple if you know the heights of the items ahead of time, but can use the CellMeasurer component if you don't.
I'm relevantly new to React and I am having trouble on how to tackle this logic:
Essentially I am creating a table using flexbox, and I also want it so that when you click on one of the rows, it expands and reveals another row (for example, it will give a small description what it is about).
So far what I have is just the table.
class Application extends React.Component {
render() {
const renderDataRows = (
[
<div key={0} className='row'>
<div className='cell description'> Mortage Bill
</div>
<div className='cell amount'>$0,000,000</div>
<div className='cell amount'>$2.50</div>
<div className='cell amount'v>000%</div>
</div>,
<div key={1} className='row'>
<div className='cell description'> Electric Bill
</div>
<div className='cell amount'>$0,000,000</div>
<div className='cell amount'>$2.50</div>
<div className='cell amount'v>000%</div>
</div>,
]
)
const containerTable = (
<div className='table-container'>
{renderDataRows}
</div>
)
return (
<div>
{containerTable}
</div>
)
}
}
More specifically, what would be the best way to structure the hidden rows? Create as a child of the cells, or siblings?
I am assuming I will need state to keep in track what is current open, etc?
I've attached Codepen link to mess around
This can be done in the following way:
Let all the cells be in a single parent div and let the cell description be another sibling div (although using would be better). Put a class on the sibling div such as hidden. Not add a click handler on the cells div. Whenever this div is clicked, update the state with that div's id/key. Now use this to set the hidden class to the other divs. Compare this.state.key with the current id/key and show or hide accordingly. I am not giving the specific code.
Note: Instead of storing the divs in the renderDataRows, just put the data in it and map over it to create all the divs. That way you can easily manipulate the hidden class and any other variation in a single place without having to update it separately for each row of data.
I am using an instance of CKEditor 4.5.7 that should not allow any <p /> tags.
The config looks like this:
config.enterMode = CKEDITOR.ENTER_BR;
config.forceEnterMode = true;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
Now, when I insert an ordered <ol /> or unordered <ul /> list, I cannot add a second list item because pressing Enter only adds a <br /> inside the <li /> instead of adding a new <li />.
I would like the Enter to insert a new <li />, and Shift+Enter to add a <br /> inside the <li />.
Only when I change the enterMode to CKEDITOR.ENTER_P, I can add new <li /> items, but then the user can add <p /> tags everywhere.
Any help greatly appreciated!
In general, using CKEDITOR.ENTER_BR is not recommended and may cause some editor features not to work as expected. If you do it to control paragraph spacing, you should use stylesheets instead.
In your particular case, however, check whether you really need to set config.forceEnterMode to true as this seems to be causing your issue.
Take a look at the Enter Key Configuration sample - with both config.enterMode and config.shiftEnterMode set to CKEDITOR.ENTER_BR it works just as you want it, with Enter creating new list items and Shift+Enter creating a <br /> inside the list item.