javascript - React switching between lists with same class

Question

I have main component which has 4 subcomponents and I wish to pass states props and functions between them. The thing is that in subcomponent List I wish to be able to get access only to interior of the list with the class ".title" Is it any way to jump between same classes in react as it was possible in jQuery? something like this next(), prev() and find()? I tried to find any way but I have failed so far.

class List extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        title: ""
    }
}

    render() {
        return (
    <div>
        <ul className="List">
          <li>
           <ul className="song">
             <li className="time">
               3:16
             </li>
             <li className="title" onClick= {this.handleSong}> Title I want to pass
             </li>
           </ul>
          </li>
    <ul className="List">
          <li>
           <ul className="song">
             <li className="time">
               4:16
             </li>
             <li className="title" onClick= {this.handleSong}> next Title I want to pass
             </li>
           </ul>
          </li>
    </div>

and here is function where I can get access to one element but don't know how to switch to next one

handleSong = (event) => {
        this.setState({
            title: event.currentTarget.textContent,
        })
        event.preventDefault()
    } 

UPDATED: I changed my code as you suggested and now it looks like this: Inside main component:

class Widget extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isClicked: true,
            playerDisplayed: true,
            title: "Still Don't Know",
            songs: []
        }
    }



componentDidMount() {
                const url = "http://localhost:3000/ListOfSongs"
                fetch(url)
                    .then(resp => resp.json())
                    .then(data => {
                        this.setState({
                            songs: data
                        })
                        console.log(data);
                    });
            }

        return (
             <div className="container">
               <div className="wrapperList">
                  <HeaderList
                    handleReturn={this.handleReturn.bind(this)}/>
                  <ul className="songsList">
                     {this.state.songs.map(e =>
                     <SongsList id={e.id} title={e.title} time={e.time}
                     handleChooseSong={this.handleChooseSong.bind(this)}
                     playerDisplayed={this.state.playerDisplayed}/>
                                    )}
                  </ul>
                </div>
              </div>
                    )
                }

SongList component :

 <li id={this.props.id}>
    <ul className="song">
     <li className="timeAndBand">
       {this.props.time} || {this.props.band}
     </li>
     <li className="title" onClick={this.props.handleChooseSong}>
           {this.props.title}
     </li>
     <li className="icons">
          <svg aria-hidden="true" data-prefix="fas" data-icon="share-alt"className="shareBtn" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           </svg>
           <svg aria-hidden="true" data-prefix="fas" data-icon="heart"
             className="heartBtn" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            </svg>
     </li>
   </ul>
 </li>

Answer 1

Each song should be a component:

<Song id={song.id} title={song.title} time={song.time} 
   handleClick={someHandlerInParent} />

in <Song /> of course html and

onClick={ this.props.handleClick( this.props.id ) }

This way you can pass to List component (parent) information about which song was selected, filter by id, get title, time, whatever. Render list using map, you can tell Song (by prop) that is currently selected to render with another style/class ... NOT BY getting/selecting DOM node and adding/removing classes - it's a lot simpler and more powerfull with react - render fn can have logic to choose style, show additional options (components).

Search for more tutorials, even TODO examples - react is not another templating engine - you have to learn thinking in react. It's hard to just start writting code w/o some knowledge.

UPDATE: Look at this example - component can contain much more (complex) data w/o need to 'artificially pumping it into html' (each template engines needs it). You can show in html only part of data and still use all 'behind scene'! No more searching for id (next/prev/n-th child...), get value, prop, state ... or manually roll-back changes (grrr#$%). You can manipulate objects w/o hand tools, not step by step (error prone) - with react you have automation 'CNC' for this.