How to create a Color-Box App using ReactJS? - GeeksforGeeks

30 Sep, 2020
Basically we want to build an app that shows the number of boxes which has different colors assigned to each of them. Each time the app loads different random colors are assigned. when a user clicks any of the boxes, it changes its color to some different random color that does not equal to its previous color value.
We create three components ‘App’ and ‘BoxContainer’ and ‘Box’.  The app component renders a single BoxContainer component only. There is no actual logic put inside the App component. BoxContainer component contains all the behind logics. It has a default prop ‘num’ that accounts for a number of different color boxes shows to the screen. It is a stateful component and has a single state that contains an array of RGB color values.  We map over each color of state ‘colors’ and for each color, we render a ‘Box’ component. The box component is responsible to show each individual boxes with their proper color set in the background of the box. The Box component sets a click event handler to each box component and when the user clicks on any box, some logic is executed that changes the color of that box. BoxContainer component uses the props system to communicate with the Box component.
Example:
index.js:JavascriptJavascriptimport React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
index.js:
Javascript
import React from 'react'import ReactDOM from 'react-dom'import App from './App'  ReactDOM.render(<App />, document.querySelector('#root'))
App.js :  App component  renders single BoxContainer component onlyJavascriptJavascriptimport React from 'react';import BoxContainer from './BoxContainer'  function App() {  return (    <div className="App">      <BoxContainer />    </div>  );}  export default App;
App.js :  App component  renders single BoxContainer component only
Javascript
import React from 'react';import BoxContainer from './BoxContainer'  function App() {  return (    <div className="App">      <BoxContainer />    </div>  );}  export default App;
BoxContainer.js :  It contains all the behind the logic. It is a stateful component. There is a single state that contains an array of RGB color values. number of colors(number of color boxes want to render by when the application starts) set as default props. We map over each color of state colors and for each color, we render a ‘Box’ component. BoxConatiner component also contains a method changeColor that is responsible to change the color of the box, each time a box is clicked. It generates a new random color until the new color value is not equal to the previous color of the box and updates the state colors by inserting that new color in place of the previous color value.JavascriptJavascriptimport React,{ Component } from 'react'import './BoxContainer.css'import Box from './Box'import { rgbValue, generateColors } from './helpers'  class BoxContainer extends Component{    // Number of color boxes want shows by default  static defaultProps = {    num : 18  }  constructor(props){    super(props)    this.state = {            // Color state contains array of rgb color values      colors : generateColors(this.props.num)    }    this.changeColor = this.changeColor.bind(this)  }    changeColor(c){        // Create new random rgb color    let newColor    do{      newColor = `rgb(        ${rgbValue()},        ${rgbValue()},        ${rgbValue()}      )`            // If new rgb color is equal to previous     // color of the box then again create new     // rgb color value    }while(newColor === c)      // Change colors array state by inserting     // new color value in place of previous color    this.setState(st => ({      colors : st.colors.map(color => {        if(color !== c) return color        return newColor      })    }))  }    render(){     return(      <div className='BoxContainer'>        {this.state.colors.map(color => (                    // For each color make a box component          <Box color={color} changeColor={this.changeColor}/>        ))}      </div>    )  }}  export default BoxContainer
BoxContainer.js :  It contains all the behind the logic. It is a stateful component. There is a single state that contains an array of RGB color values. number of colors(number of color boxes want to render by when the application starts) set as default props. We map over each color of state colors and for each color, we render a ‘Box’ component. BoxConatiner component also contains a method changeColor that is responsible to change the color of the box, each time a box is clicked. It generates a new random color until the new color value is not equal to the previous color of the box and updates the state colors by inserting that new color in place of the previous color value.
Javascript
import React,{ Component } from 'react'import './BoxContainer.css'import Box from './Box'import { rgbValue, generateColors } from './helpers'  class BoxContainer extends Component{    // Number of color boxes want shows by default  static defaultProps = {    num : 18  }  constructor(props){    super(props)    this.state = {            // Color state contains array of rgb color values      colors : generateColors(this.props.num)    }    this.changeColor = this.changeColor.bind(this)  }    changeColor(c){        // Create new random rgb color    let newColor    do{      newColor = `rgb(        ${rgbValue()},        ${rgbValue()},        ${rgbValue()}      )`            // If new rgb color is equal to previous     // color of the box then again create new     // rgb color value    }while(newColor === c)      // Change colors array state by inserting     // new color value in place of previous color    this.setState(st => ({      colors : st.colors.map(color => {        if(color !== c) return color        return newColor      })    }))  }    render(){     return(      <div className='BoxContainer'>        {this.state.colors.map(color => (                    // For each color make a box component          <Box color={color} changeColor={this.changeColor}/>        ))}      </div>    )  }}  export default BoxContainer
Coin.js : It is responsible to show each box with its proper color set in the background. It also set a click handler to each div component and executes a callback each time user clicks on the box. The click handler callback in return calls the changeColor method of the BoxContainer component passing the current color of the box. BoxContainer component communicates with the Coin component using the props system.JavascriptJavascriptimport React,{ Component } from 'react'  class Box extends Component{  constructor(props){    super(props)    this.handleChangeColor = this.handleChangeColor.bind(this)  }    // Handler callback  handleChangeColor(){        // Call parent component cahngeColor  method passing the    // color value of div    this.props.changeColor(this.props.color)  }    render(){        // Create a div component and assign the given     / color value by BoxContainer component as its    // background color    return <div          // Set click handler to the div and pass a callback      onClick={this.handleChangeColor}       style={{backgroundColor:this.props.color,                   width:'13em', height:'13em'}}     />  }}  export default Box
Coin.js : It is responsible to show each box with its proper color set in the background. It also set a click handler to each div component and executes a callback each time user clicks on the box. The click handler callback in return calls the changeColor method of the BoxContainer component passing the current color of the box. BoxContainer component communicates with the Coin component using the props system.
Javascript
import React,{ Component } from 'react'  class Box extends Component{  constructor(props){    super(props)    this.handleChangeColor = this.handleChangeColor.bind(this)  }    // Handler callback  handleChangeColor(){        // Call parent component cahngeColor  method passing the    // color value of div    this.props.changeColor(this.props.color)  }    render(){        // Create a div component and assign the given     / color value by BoxContainer component as its    // background color    return <div          // Set click handler to the div and pass a callback      onClick={this.handleChangeColor}       style={{backgroundColor:this.props.color,                   width:'13em', height:'13em'}}     />  }}  export default Box
helper.js : It creates and returns some helper function that is used in our main components.JavascriptJavascript// Method return a random number from 0 to 255 const rgbValue = () => {  return Math.floor(Math.random() * 256)}  // Method generates an array of rgb colorsconst generateColors = (num) => {  let colors = []      for(let i=0; i<num; i++){    const red = rgbValue()    const blue = rgbValue()    const green = rgbValue()    colors.push(`rgb(${red},${blue},${green})`)  }  return colors}  export { rgbValue, generateColors }
helper.js : It creates and returns some helper function that is used in our main components.
Javascript
// Method return a random number from 0 to 255 const rgbValue = () => {  return Math.floor(Math.random() * 256)}  // Method generates an array of rgb colorsconst generateColors = (num) => {  let colors = []      for(let i=0; i<num; i++){    const red = rgbValue()    const blue = rgbValue()    const green = rgbValue()    colors.push(`rgb(${red},${blue},${green})`)  }  return colors}  export { rgbValue, generateColors }
BoxContainer.css :CSSCSS.BoxContainer{  display:flex;  flex-wrap:wrap;  justify-content: center;  align-items: center;  flex:1}
BoxContainer.css :
CSS
.BoxContainer{  display:flex;  flex-wrap:wrap;  justify-content: center;  align-items: center;  flex:1}
Output :
Color Box
react-js
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to create footer to stay at the bottom of a Web page?
Node.js fs.readFileSync() Method
How to calculate the number of days between two dates in javascript?