Using React, how can I update multiple elements with different values?

Question

have a simple music app that I'm making. I have 7 "radio station" buttons set up to update the same elements in 7 different ways. I want to update the mp3 filepath (src attribute), the name of the song, the name of the artist, and the name of the station.

This is an example of how it looks in my jQuery code...

$('.deg295').click(function () { //One of the buttons

$('audio source').attr('src', 'music/panda.mp3'); //The mp3 filepath

$('.labels p:nth-child(1) em').text("Urban Beach Radio") //The station name

$('.labels p:nth-child(2)').text("PANDA"); //The song name

$('.labels p:last-child').text("Desiigner"); // The artist name

radio.load();
radio.play();
});

Meanwhile, here's the component in question...

var React = require('react');

let rock = require('../images/pngs/rock.png');
let none = require('../images/pngs/none.png');
let blue = require('../images/pngs/blue.png');
let flash = require('../images/pngs/flash.png');
let estim = require('../images/pngs/estim.png');
let urban = require('../images/pngs/urban.png');
let intl = require('../images/pngs/intl.png');

//The radioClass prop == "radio"
export default class Radio extends React.Component {

   render() {
      return (
     <section className={this.props.radioClass}> 

     <div className="septagon">

         //These are the 3 labels I want to update onClick
        <div className="labels">
           <p>
              <em></em>
           </p>
           <p>Radio</p>
           <p>Off</p>
        </div>
        //The 7 buttons are below
        <span className="deg40"><img src={rock} alt="" /></span>
        <span className="deg90"><img src={none} alt="" /></span>
        <span className="deg140"><img src={blue} alt="" /></span>
        <span className="deg195"><img src={flash} alt="" /></span>
        <span className="deg245"><img src={estim} alt="" /></span>
        <span className="deg295"><img src={urban} alt="" /></span>
        <span className="deg345"><img src={intl} alt="" /></span>

        //The audio element with the mp3 filepath that I also want to update
        <audio id="playmusic" preload="none">
           <source type="audio/mpeg" src="" id="audio"/>
        </audio>
     </div>
  </section>
  )

Yes, although that version I showed needs to be refactored (since I copied & pasted instead of creating a function with params) — Matiny
– Matiny, Commented Sep 5, 2017 at 12:32

Raghav Garg · Accepted Answer · 2017-09-05 04:51:38Z

Below is a little mock code for you, maybe it can help you.

export default class Radio extends React.Component {

  constructor() {
    // initializing the current selection with empty object.
    this.state = {
      current_selection: {}
    };
  }

  handleChangeSelection(selection) {
    // update the state with new data,
    // so that react will see state change and re-render component
    this.setState({
      current_selection: selection
    })
  }

  render() {
    return (
      <section className={this.props.radioClass}>

        {/* //The 7 buttons are below */}
        <span 
          className="deg40" 
          onClick={() => handleChangeSelection({
            // deg40 related data
            src: 'music/panda.mp3',
            song_name: 'PANDA',
            station_name: 'Urban Beach Radio',
            artist_name: 'Desiigner'
          })}
        >
          <img src={rock} alt="" />
        </span>

        {/* 
          use this.state.current_selection where ever you want to,
          and it will be updated automatically upon triggering `handleChangeSelection`, 
        */}
        <label>Song Name: {this.state.current_selection.song_name}</label>
        <label>Station Name: {this.state.current_selection.station_name}</label>
        <label>Artist Name: {this.state.current_selection.artist_name}</label>
        <audio id="playmusic" preload="none">
          <source type="audio/mpeg" src={this.state.current_selection.src} id="audio"/>
        </audio>

      </section>
    )
  }


}

This is the design you should follow.

Saving your current selection in the state of the component, and using it wherever you want it to update in future with newly selected data(i guess <audio> in your case).

Now to change it on multiple events(various button clicks, in your case) you have to create a single function which will update the state with new data(you will have to pass the new data from the origin of the event, where you are calling this function) and upon changing the state, the react will re-render the component automatically.

Collectives™ on Stack Overflow

Using React, how can I update multiple elements with different values?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related