Feb.22

React Learning for beginners

How to make project in react?
$create-react-app <project-name>

Start (Run) project?
$npm start

How to install bookstrap in the react app?
$npm i bootstrap@4.1.1

importing this bookstrap to project
import ‘bookstrap/dist/css/bootstrap.css’;

 

#######################################

Deleting State Value

############################

Removing State

Filter method to get all the counter except given id function used to delete operation.

forexample we need to remove column id value 2 from our counter state.
class App extends Component {
state= {
counters: [
{ id: 1, value: 4 },
{ id: 2, value: 0 },
{ id: 3, value: 0 },
{ id: 4, value: 0 }
]
};

}

We can do this by the function like this.

handleDelete=counterId=> {
const new_counters = this.state.counters.filter(older_counter => older_counter.id !== counterId);
 this.setState({ new_counters });
};
Where,
counterId  —> is parameter of calling handleDelete function calling.
<button onClick={() =>this.props.onDelete(this.props.counter.id)>Delete</button>
this.state.counters.filter —> this is filter function
older_counter —> is also calling function with parameter older_counter into the filter function.
this.setState({ counters = new_counters })  —> this function has set the state value updated .
++++++++++++++++++++++++++++++++++++++++
<NavBar
totalCounters={this.state.counters.filter(c=>c.value > 0).length}
/>
+++++++++++++++++++++++++++++++++++++++++
Description
in above example the NarBar component have send the parameter totalCounters.

this.state.counters.filter(c=>c.value > 0).length}

In above code the current state counter filters with its parameter counters.value > 0

where the counters.value is greater than 0 and

it counts the length of above condition.

 

 

 

Share this Story:
  • facebook
  • twitter
  • gplus

Leave a comment

Facebook Comment