Using the useState hook to set the video title in a React Native application

I am currently working on developing a dynamically generated video view within React Native. I am using the `Play` function with parameters `letter` and `mode`. The selected video is retrieved from an array and displayed correctly in the console log. However, the `videoTitle` remains static and does not update when the function is called again. It only changes when the `setVideoTitle` function is modified manually, for example through an `onclick` event.

export default function Play ({ navigation, route}) {

let letter = route.params.Letter;
let mode = route.params.Mode;

const video = useRef(null);
const [selection, setSelection] = useState(0);

const Videos = require('../components/Videos');
const selectedVideo = Videos.Array.find(V => V.name === letter.toString());
console.log(selectedVideo)
const [videoTitle, setVideoTitle] = useState(selectedVideo.Front[mode]);
console.log("VideoTitle: "+ videoTitle)
const [videoSpeed, setVideoSpeed] = useState(1.0);

https://i.sstatic.net/2usVe.png

Answer №1

Have you had a chance to experiment with the Play function in this specific manner? If not, here is a suggestion for you to try:


const VideoComponent = require('../components/VideoComponent');

function PlayMedia ({ navigation, route }) {
const videoRef = useRef(null);
let letterKey = route.params.Letter;
let modeOption = route.params.Mode;

const [currentSelection, updateSelection] = useState(0);
const [videoPlaybackSpeed, changePlaybackSpeed] = useState(1);
const [videoTitleText, modifyTitleText] = useState();
const selectedVid = VideoComponent.Array.find(V => V.name === letterKey.toString());

useEffect(() => {
  if(selectedVid && modeOption) {
    setVideoTitle(selectedVid.Front[modeOption]);
    console.log('Currently Selected Video:', selectedVid);
    console.log('Current Video Title: ', videoTitleText);
  }
},[selectedVid, modeOption]);

...
};

export default PlayMedia;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implement a concealed identification field with React-Admin within a React Native application

I'm currently working on incorporating the SimpleFormIterator from the React-Admin module in order to generate a list of child records within a parent record edit form. After setting up the SimpleFormIterator component with all the necessary details ...

Passing state data from parent to child components in React

I am currently facing an issue with binding the state of a parent component to a child component. Here is a snippet of the code: Parent Component: class ParentForm extends React.Component { constructor(){ super(); this ...

Troubleshooting Google Analytics on Localhost: Investigating Issues with Test Code

I've been working on an HTML file and wanted to integrate Google Analytics into it. After signing up with GA, I received a tracking code to insert into my HTML file within the head section at the very beginning. I followed the instructions and then pr ...

after ajax post, enhance original object by merging with the latest server values

After making a call to the server and successfully saving some data, I need to update the JSON array object that I have with new values. Here is a snippet of my code: [ { "id": 1, "uuid": "ce54acea-db20-4716-bceb-2f3deb1b2b86", "name": null, ...

Using custom class instances or objects within Angular controllers is a simple process

Using three.js, I have created a class called threeDimView that houses my scene, camera, and other elements. In my JavaScript code, I instantiate a global object of this class named threeDimView_. threeDimView_ = new threeDimView(); Now, I wish to displa ...

What is the best way to assign a class to certain columns within a table?

I'm working on a code that generates random numbers for 3 columns and checks if each generated number exceeds +5/-5 of its previous number. However, I've encountered an issue where the first two columns always have the "blink" CSS applied to them ...

What is the process for calling CSS from a separate directory?

I am looking to start building a website. Can someone advise on how to organize html, css, and javascript into separate folders? One folder will house files specifically for writing HTML and JavaScript, while the other folder will be dedicated solely to ...

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

Enhance your website with jQuery scripts for dynamically loaded content without relying on $(document).on

Currently, I am utilizing an infinite scroll plugin in conjunction with ajax. The issue arises when the 'next page' is loaded using ajax, causing all other scripts related to ajax on that subsequent page to malfunction. Suggestions have been mad ...

What is the best way to traverse through a nested JSON file with d3.js?

Greetings. I am currently facing a challenge in navigating through a nested JSON file. Below is the JSON data that I need assistance with: {"Id":466,"Name":"korea", "Occurrences": ...

Executing function inside an Angular factory

I am currently working with an Angular factory that contains various functions. My goal is to use myService to retrieve data, and upon successful retrieval, call another function within the factory: myApp.factory('myFactory', function($http) { ...

a solution to the focus/blur issue in Firefox's browser bug

I have created the following script to validate if a value entered in an input field already exists in the database. $('#nome_field').blur(function(){ var field_name=$('#nome_field').val(); $.ajax({ url: " ...

Display the current date in a formatted way using Angular 2

I am struggling with displaying the current date in the format I desire. The code snippet I currently have is: this.whatTime = Observable.interval(1000).map(x => new Date()).share(); When I use this code in my template like so: {{whatTime | async}} ...

Tips for organizing certain elements in a horizontal row

In the process of developing a WordPress plugin for shortcodes generation. The user can choose to create testimonials. For example, the shortcode below functions as a slider: [testimonial]Content 1[/testimonial] [testimonial]Content 2[/testimonial] [test ...

I'm encountering a 422 error on a functioning function

I've developed a bucket-list application with a feature that allows users to delete items from their list/database. However, when the delete function is triggered, I encounter an HTTP 422 Unprocessable Entity error. Oddly enough, upon refreshing the p ...

Modifying the hue of Material UI tab label

I attempted to modify the label color of a tab to black, but it seems to be stuck as white. Is this color hard-coded in material-ui? If not, how can I change it? Here's what I've tried: const customStyles = { tab: { padding: '2p ...

Guide on transferring JavaScript Objects from the Front End to Spring Boot Back-end and effectively processing and parsing them

After struggling with this issue repeatedly while developing my web apps, I've reached a breaking point and need some help. My frustration might come across as venting, but I'm genuinely stuck. The challenge I'm facing is sending key-value ...

Browsing a Collection of Objects within an Array in JavaScript

After making an ajax request to load a JSON file and parsing it to store a reference to the object, I encountered issues while trying to loop through the object due to its structure. Below is a snippet of the JSON data that I am working with: { "marker ...

Using Selenium WebDriver to retrieve the row number that is visible within a table

As I write a test script using Selenium WebDriver and Java for a page containing a table with multiple rows and columns, I face the challenge of dealing with hidden rows alongside displayed ones. With around 1800 total rows, only seven are visible on the ...

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...