Welcome to collectivesolver - Programming & Software Q&A with code examples. A website with trusted programming answers. All programs are tested and work.

Contact: aviboots(AT)netvision.net.il

Prodentim Probiotics Specially Designed For The Health Of Your Teeth And Gums

Instant Grammar Checker - Correct all grammar errors and enhance your writing

Teach Your Child To Read

Powerful WordPress hosting for WordPress professionals

Disclosure: My content contains affiliate links.

31,166 questions

40,722 answers

573 users

How to pass data to components in React JS

2 Answers

0 votes
// src/components/multiplecounters.jsx

import React, { Component } from "react";
import Counter from "./counter";

class MultipleCounters extends Component {
  state = {
    counters: [
      { id: 1, cvalue: 3 },
      { id: 2, cvalue: 1 },
      { id: 3, cvalue: 7 }
    ]
  };
  render() {
    return (
      <div>
        {this.state.counters.map(mcounter => (
          // Pass data 
          <Counter key={mcounter.id} cvalue={mcounter.cvalue} />
        ))}
      </div>
    );
  }
}

export default MultipleCounters;

// src/components/counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    total: this.props.cvalue
  };

  totalPlus = (e) => {
    console.log(e);
    this.setState({ total: this.state.total + 1 });
  };

  render() {
    return (
      <React.Fragment>
        <span className={this.setStyle()}>
          Render Dynamically With bootstrap.css: {this.getTotal()}
        </span>
        { /* Pass event argument */}
        <button onClick={ () => this.totalPlus({ id: 8364 })} className="btn btn-secondary btn-sm">
          +
        </button>
      </React.Fragment>
    );
  }

  setStyle() {
    let classes = "badge m-2 badge-";
    classes += this.state.total === 0 ? "warning" : "primary";
    return classes;
  }

  getTotal() {
    const { total } = this.state;
    return total === 0 ? "Zero" : total;
  }
}

export default Counter;
// src/index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import MultipleCounters from './components/multiplecounters'


ReactDOM.render( 
  <MultipleCounters />,
  document.getElementById('root')
);

serviceWorker.unregister();




/*
run:

Render Dynamically With bootstrap.css: 13
Render Dynamically With bootstrap.css: 14
Render Dynamically With bootstrap.css: 15

{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}
{id: 8364}

*/

 





answered Apr 2, 2020 by avibootz
0 votes
// src/components/multiplecounters.jsx

import React, { Component } from "react";
import Counter from "./counter";

class MultipleCounters extends Component {
  state = {
    counters: [
      { id: 1, cvalue: 3 },
      { id: 2, cvalue: 1 },
      { id: 3, cvalue: 7 }
    ]
  };
  render() {
    return (
      <div>
        {this.state.counters.map(mcounter => (
          // Pass data
          <Counter key={mcounter.id} cvalue={mcounter.cvalue} id={mcounter.id} /> 
        ))}
      </div>
    );
  }
}

export default MultipleCounters;
// src/components/counter.jsx

import React, { Component } from "react";

class Counter extends Component {
  state = {
    total: this.props.cvalue
  };

  totalPlus = (e) => {
    console.log(e);
    this.setState({ total: this.state.total + 1 });
  };

  render() {
    console.log(this.props);
    return (
      <React.Fragment>
        <h5>Counter Number: {this.props.id}</h5>
        <span className={this.setStyle()}>
          Render Dynamically With bootstrap.css: {this.getTotal()}
        </span>
        { /* Pass event argument */}
        <button onClick={ () => this.totalPlus({ id: 8364 })} className="btn btn-secondary btn-sm">
          +
        </button>
      </React.Fragment>
    );
  }

  setStyle() {
    let classes = "badge m-2 badge-";
    classes += this.state.total === 0 ? "warning" : "primary";
    return classes;
  }

  getTotal() {
    const { total } = this.state;
    return total === 0 ? "Zero" : total;
  }
}

export default Counter;
// src/index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import MultipleCounters from './components/multiplecounters'


ReactDOM.render( 
  <MultipleCounters />,
  document.getElementById('root')
);

serviceWorker.unregister();



/*
run:

Counter Number: 1
Render Dynamically With bootstrap.css: 3
Counter Number: 2
Render Dynamically With bootstrap.css: 1
Counter Number: 3
Render Dynamically With bootstrap.css: 7

{id: 8364}
{cvalue: 3, id: 1}
{id: 8364}
{cvalue: 7, id: 3}
{id: 8364}
{cvalue: 1, id: 2}

*/

 





answered Apr 2, 2020 by avibootz

Related questions

1 answer 132 views
2 answers 153 views
1 answer 123 views
123 views asked Jun 17, 2020 by avibootz
...