React: Use a local variable in the render() return
This code shows how to use a local variable in a React Componente in the render() / return() function.
After render(), a runtime variable is created;
1)
render() {
let breadcrumb_path = "";
return (..
|
2) In the return(..) loop, the variable can then be changed as here in an array.map() function
encodeURI(breadcrumb_path = breadcrumb_path + "/" + path)} |
In Visual Studio: React Component
//----< render >---- render() { //--------< render(HTML) >--------
let breadcrumb_path = "";
return (
//----< return >---- <div className="submit-form"> { //--< IsLoaded >-- <div>
<div>Folder: {
(this.state.folder)?.split("/").map(path => ( <> <a href={this.baseURL + "?f=" + encodeURI(breadcrumb_path = breadcrumb_path + "/" + path)} style={{ margin: '4px' }}>{path}</a> </> ) ) } </div> </div> //--</ IsLoaded >-- } </div> //----</ return >---- ); //--------</ render(HTML) >-------- } //----</ render >---- |
In the output in the browser
The path of a breadcrumb is extended at run time
Mit array.map(path=>( breadcrumb_path = breadcrumb_path + "/" + path)) |