How to sync Mongodb data to ElasticSearch by using MongoConnector
Introduction This post is about syncing your mongodo database data to…
June 26, 2020
In the ReactJS project, you are having aa parent component and a child component. Let’s assume, we have a Movie and MovieList component.
MovieList is a parent component and is maintaining the list of movies. I want to have the add/remove method in this component. So, this is the correct place to have the remove method. But, this method will be called from the child component: Movie.
We will see how to pass the method reference from parent component to child component and how child component uses that method and pass the argument to the parent component.
import React, { Component } from "react";
import Movie from "../Movie";
export default class TourList extends Component {
state = {
movies: [
{
id: 123,
name: 'Test 1'
},
{
id: 234,
name: 'Test 2'
}
]
};
removeMovie = (id) => {
const { movies } = this.state;
const filteredMovies = movies.filter(movie => movie.id !== id);
this.setState({
tours: filteredMovies
});
};
render() {
return (
<section>
{this.state.movies.map(movie => (
<Movie key={movie.id} movie={movie} removeMovie={this.removeMovie} />
))}
</section>
);
}
}
In this parent component, we are having an array of movies. And is rendering the Movie component from this component. This parent component has a method removeMovie which takes an argument movie-id. We are passing this method reference to Movie component via props.
import React, { Component } from "react";
export default class Movie extends Component {
render() {
const { id, name } = this.props.movie;
const { removeMovie } = this.props;
return (
<article>
<h2>{name}</h2>
<span onClick={() => removeMovie(id)}>
<i className="fas fa-window-close" />
</span>
</article>
);
}
}
Note the interesting things:
This is a very helpful trick in passing the reference of methods to some lower levels of components.
Introduction This post is about syncing your mongodo database data to…
Introduction In this post, we will discuss 3 different ways to import a…
Introduction In this guide, we will see git basic commands, and fundamentals of…
Introduction You already have a content type with one or more fields in it…
Assuming your web application is using oracle, and you are deploying your app on…
I have a Java project and dependencies are being managed through maven. I have…
Introduction This post has the complete code to send email through smtp server…
Introduction In a normal email sending code from python, I’m getting following…
Introduction In one of my app, I was using to talk to . I have used some event…
Introduction So you have a Django project, and want to run it using docker image…
Introduction It is very important to introduce few process so that your code and…
Introduction In this post, we will see a sample Jenkin Pipeline Groovy script…