React populating a dropdown from an input field

I have a simple React app that allows you to create multiple "story" components when you click a button. Each "story" has two components - an input field (to edit the story title) and a dropdown list (showing all other story titles).

I’m trying to get the story dropdown list to populate with all the story titles (at the moment they are hard coded to a state array called storyOptions).

The end idea is - User creates new story > user updates story title > user chooses another story to link to from the dropdown (dropdown shows the titles of all the other stories).

My current code is below...

class App extends Component {

constructor(props) {
super(props);
this.storyList = ;
this.state = {storys: this.storyList};
}

addNewStory(e) {
this.storyList.push({
id: this.storyList.length,
title:"Type your story title here",
});
this.setState({storys: this.storyList});
}

render() {
return (


this.addNewStory()}>
"Add new story"

{this.state.storys.map(c => )}

</div>
);
}
}

export default class StoryComponent extends Component {

constructor(props) {
super(props);
this.state = {
defaultStoryOption: 0,
title: this.props.title
};
this.storyOptions = [
'Story 1', 'Story 2'
]
this.handleQuestionChange = this.handleQuestionChange.bind(this);
this.storyOptionChange = this.storyOptionChange.bind(this);
}

handleTitleChange(e) {
console.log("Title is being updated");
this.setState({title: e.target.value});
}

storyOptionChange(e) {
}

getListOfStories() {
return this.storyOptions;
}

render() {
return (





Title

</div>
</div>
);
}
}

do you want to fetch the drop-down values from the server?
– Aravind S
Jun 29 at 19:46

not via the server, i’m looking for the dropdown to populate from all of the story titles. i.e this.storyOptions in StoryComponent is actually generated based on each story title (number of stories depends on how many the user has added).
– 232 Studios
Jun 30 at 4:17

so your story options will be your story title?
– Aravind S
Jun 30 at 5:30

Yep exactly! Every time i add a new StoryComponent the dropdown should increase (adding the story title from the new StoryComponent)
– 232 Studios
Jun 30 at 7:44

Try passing you storys as a prop to StoryComponent and set that prop to options in Drop-down component
– Aravind S
Jun 30 at 9:33

storys

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.