Landing page using React

Community feedback

• 

  Matt•180

  @mslee017Posted over 1 year ago

  Hey there! If you want to give it a go without exact code I'll try and lay steps our here for the button with state, and feel free to look at my project if you get stuck. For the button with state, what I did was create a state value called currentActive and by default it should be set to null. You can then create a function that takes an argument and all that function is going to do is setCurrentActive to the number it clicks, like so: 1). Create a state that will essentially hold the current active element of the button groups. It should be initialized to null

  2). Create a function to handle this state on click, it will need an argument (eventually receives index of the array being Mapped over). Function should simply then be used to set the current value of the state created above

  3). On click function inside the elements you are returning/mapping over. Map should use TWO arguments in this case, the number itself and the index argument the callback gives. Your function that is setting the state inside here should then take the index as its argument

  4). Conditional styles! Inside the classes, use template literal to check if the index is equal to the state value. If it is, it should be orange. If not, the dark blue.

  Good luck!

  0
• 

  vinu cyril•980

  @vinumanPosted over 1 year ago

  Hello,

  Select all the buttons grouped under the class 'selections'.

  Declare a variable for the current active button.

  Add an event listener on the selections and declare the target. If the target has 'Button', apply background color and color properties to the target.

  Before executing this, check if there already exists an active button. If so, remove the background color and color of the same.

  Finally make the current target active button.:

  Code:

  selection.addEventListener('click', function(e){

  const target = e.target;
  
  if(target.matches('Button')){
  
     if(activeButton){
      activeButton.style.backgroundColor = '';
      activeButton.style.color = '';
     }
  
      target.style.backgroundColor = '#979797';
      target.style.color = '#fff';
      activeButton = target;
  }
  

  })

  0