I have created a simple div and inside this div I have map the array and poplute the data on view. But i want that, Everytime, a funtion should be call automatically when the vertical scolling is end. Please suggest How can implement it.
<div>
{timeLineData.map((item, idx) => (
<Card>
<h3>{item.name}</h3>
<p>{item.name}</p>
<p>{item.name}</p>
<p>{item.name}</p>
</Card>
))}
</div>
Related
((New to React))
I am trying to get the different jobs (salary.job.id listed above) to pass through on click. The jobs are already being obtained through an axios call.
Is there an easier way to accomplish this? Also, is it correct to call the this.makesalary twice (once in componentDidMount and another through the click?
This is what i am trying to pass through
makesalary(slug = "charlotte") {
axios.get(`https://api.teleport.org/api/urban_areas/slug:${slug}/salaries/`)
.then(results => {
console.log(results)
const filteredata = results.data.salaries.filter(salary=>{
if(salary.job.id === "UX-DESIGNER"){
return true
}
if (salary.job.id === "WEB-DEVELOPER"){
return true
}
if(salary.job.id === "MOBILE-DEVELOPER"){
return true
}
return false
})
this.setState({salaries:
filteredata
})
}
)
}
Can this be called twice? and is the placement correct?
componentDidMount (){
this.makesalary(this.props.slug)
}
_onclick(salary){
this.makesalary(salary.job.id)
}
Here is the render
<div>
<h2>What Tech Job are you in currently?</h2>
<CardGroup>
<Card>
<Card.Img variant="top" src= {Mobileicon} />
<Card.Body>
<Card.Title>Mobile Developer</Card.Title>
<Card.Text>
Mobile Developer specialise in mobile technology such as building apps for Google's Android, Apple's iOS and Microsoft's Windows Phone platforms.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" onClick={this._onclick}>Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
<Card>
<Card.Img variant="top" src= {UXicon} />
<Card.Body>
<Card.Title>UX Designer</Card.Title>
<Card.Text>
In a nutshell, the UX designer is responsible for how a product or website feels.
The UX designer's job is to zero in on users' underlying emotional and functional needs.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" >Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
<Card>
<Card.Img variant="top" src={Webdevelop} />
<Card.Body>
<Card.Title>Web Developer</Card.Title>
<Card.Text>
A Web Developer is responsible for the coding, design and layout of a website according to a company's specifications.
As the role takes into consideration user experience and function, a certain level of both graphic design and computer programming is necessary.
</Card.Text>
</Card.Body>
<Card.Footer>
<Button variant="danger" >
Pick this Job!</Button>{' '}
</Card.Footer>
</Card>
</CardGroup>
</div>
)
}
I'd like to help out so I'm going to point out a few things and also suggest a bit. Before starting, I have to apologize if something I say is incorrect and would appreciate it if someone would correct me on such.
I'm also going to assume that your makesalary function is defined above (where the Axios call is shown).
In your componentdidmount method, you call makesalary with the parameter you have obtained from props. If your props are valid, this is absolutely fine.
You also happen to call makesalary in the _onclick method. I'd suggest you rename it to something such as handleClick or onClickHandler to make it more clear, and remove the _ in front as it's unnecessary (unless it's a convention you are using). The method itself looks fine.
When you are calling _onclick with the button, keep in mind that it's going to pass an event into the method. You should handle this by either passing a function such as () => _onclick(salary) to onClick at the button (since you don't intend to use the event for anything). Aside from handling the event correctly, this also helps you to pass in the correct parameter for _onclick. In the code snippet you have provided, it seems that onClick is not passing any parameters to the _onclick function.
I'd recommend you to read up on the official React documentation regarding this:
https://reactjs.org/docs/handling-events.html.
Hope I've helped!
EDIT: In case you're wondering, it's absolutely okay to call the same method twice!
I have a functional REACT component, code is as follows
const MobileListing = (props) => {
function handleClick() {
console.log('in cardClick');
}
return (
<div>
<Row>
<Card onClick={() => handleClick()} style={{cursor : 'pointer'}} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</Row>
</div>
);
}
export default MobileListing;
I want to make the entire card clickable. I read through a post on stack overflow Making whole card clickable in Reactstrap which talks about using an anchor tag, but that doesn't work for me.
Can someone help me understand what I am doing wrong?
A card looks like this on my site and I want to make the whole card clickable.
You can use the onClick either on the top-level div element for this, or, in case there would be more cards inside the Row you can wrap each with a div and give it the onClick, property.
such like:
<div>
<Row>
<div onClick={handleClick}>
<Card style={{ width: '18rem', cursor : 'pointer' }} >
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make up the bulk of
the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
</div>
</Row>
</div>
It is better to wrap it around with an anchor tag because clickable things should be links if they go to places, and should be buttons if they do things.
Using click handlers with other things just make things inaccessible.
I am having issues with rendering a pop up loading screen. So assume i have a imported component called ( LoadingDialog ) and i want it to render when the state property, loading is true. When the user clicks a button on the current component, it triggers an api call which also changes the loading state to true, thus rendering the loading dialog.
I understand I can use conditional rendering to achive this, eg:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return(
<div> OTHER UI ELEMENTS </div>
)
but now i have a problem because, when my loadingDialog is rendered, my other ui (text area, background card, button ) all disappear, which is the opposite of what im trying to achieve. With this approach, i can only display my actual ui elements or the loading dialog.
I've tried separating the other ui elements into a separate container but it doesn't help as i need to call the api on click of an button and the entire problem i'm having now occurs in that child container.
I've also tried the above approach with passing a parent on click method as a prop and calling that when the button is clicked but somehow ended up with a recursive loop of the parent/child component
Heres my actual code:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return (
<div>
<Card className="center card">
<div className="row">
<div class="column" >
<TextField
id="outlined-name"
name="searchContent"
onChange={this.handleChange}
value={this.state.searchContent}
label="Name"
variant="outlined"
/>
</div>
<div className="column">
<Button
variant="outlined"
color="primary"
onClick={this.handleClick}
>
Search
</Button>
</div>
</div>
</Card>
</div>
);
}
and this is my handle click function:
handleClick = (event, name) => {
this.setState({loading : true})
fetch(uri)
.then(res => res.json())
.then(data => {
console.log(data);
this.setState({loading : false})
});
};
As i said before, I tried separating the UI bit on the else block to a different component but the problem still persisted. To summarise it again,
I can only render my actual ui or a popup box but not both at any given time.
I want to be able to render both at the same time, if needed.
I am very new to react and staying away from the likes of redux, hooks etc.
SOLVED Thanks to Chris G
So the issue was easily fixed by using a logical and operator to check if loading is true or false, like so {this.state.loading && <LoadingDialog />}
eg.
render(){
return(
<div>
{this.state.loading && <LoadingDialog />}
<div>
//REST OF THE STUFF THAT SHOULD BE RENDERED REGARDLESS
</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 am using Material UI and I want to change the default animation when a Dialog is open so that when it opens up it appears from bottom to top.
Is there a way to do this?
Thanks
Use the transition property.
<Dialog
transition={props => (
<Slide direction="left" {...props} />
)}
>
</Dialog>