Я хотел бы отображать определенный RSS-канал в зависимости от того, какой элемент вы выбираете в раскрывающемся меню. В тот момент, когда я выбираю элемент, он отображает ссылку на экране, но не обновляет состояние.
import React, { Component } from 'react'
class FacebookRSSDropdown extends Component {
state = {
links: [{id: 1, name: "Lost and Found Pets Northern Ireland" , content: "https://www.facebook.com/PetsLostandFoundNorthernIreland/"},
{id: 2, name: "USPCA", content: "https://www.facebook.com/UlsterSPCA/"},
{id: 3, name: "Pawboost Northern Ireland", content: "https://www.facebook.com/Northern-Ireland-Lost-Dogs-Cats-Pets-147512902479398/"},
{id: 4, name: "Assisi Animal Sanctuary", content: "https://www.facebook.com/AssisiAnimalSanctuary/"},
{id: 5, name: "Pets Reunited Newry and Mourne", content: "https://www.facebook.com/PetsReunitedNewryAndMourne/"}
],
linkClicked: [{
content: ''
}]
}
handleChangeEvent = (e) => {
console.info(e.target.value);
this.setState({
linkClicked: e.target.value
})
}
render() {
return (
<div className = "container-fluid">
<h1> Facebook RSS Feeds </h1>
<select className = "form-control" onClick = {this.handleChangeEvent}>
{this.state.links && this.state.links.map(link => {
return (
<option value = {link.content}>{link.name}</option>
)
})}
</select>
<div id = "rssfeeds" className = "row">
<div className = "col">
<div className = "fb-page"
data-tabs = "timeline,events,messages"
data-href = {this.state.linkClicked.content}
data-width = "500"
data-height = "850"
data-hide-cover = "false">
</div>
</div>
</div>
</div>
)
}
}
export default FacebookRSSDropdown





Для <select> вы должны зарегистрировать слушателя для onChange, а не onClick
handleChangeEvent = ev => {
this.setState({
linkClicked: ev.target.value
})
}
<select className = "form-control" onChange = {this.handleChangeEvent}>