Why Caption on the button doesn't change?

Kindly note that your template jsx is hard coded and is only evaluated once when the program runs initially. So it just takes value of Name as true and becomes a constant. Rendering it again is not going to change in any way. You should use a component rather:

<Template />

let Name = true;

const Tekst = () => {
  Name = !Name;
  Render();
};

const Template = () => (
  <div>
    <h1>Visibility Toggle</h1>
    <button onClick={Tekst}>
      {Name ? "Show details" : "Hide details"}
    </button>
  </div>
);

const root = document.getElementById("app");

const Render = () => ReactDOM.render(<Template />, root);

Render();

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

This is how I would do that:

    
    class Template extends React.Component {
      constructor() {
        super();
        
        this.state = {name: true};
      }

      test = () => {
        this.setState({name: !this.state.name});
      };
      
      render() {
        return (
          <div>
            <h1>Visibility Toggle</h1>
            <button onClick={this.test}>{this.state.name ? 'Show details' : 'Hide details'}</button>        
          </div>
        )
      }
    }
    
ReactDOM.render(
  <Template/>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Because a component only renders when state or props change. The way you defined your component, it has no props or state.

Try:

class Tekst extends React.Component {
  constructor(props) {
    super(props);
    this.state = { Name: true };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ Name: !this.state.Name });
  }

  render() {
    return (
      <div>
        <h1>Visibility Toggle</h1>
        <button onClick={this.toggle}>{ this.state.Name ? 'Show details' : 'Hide details'} />
      </div>
    );
  }
}

I'm not sure which version of react or env you're on but this should work for most setups.

It appears the OP has a very limited understanding of React. This is not a criticism, we all have to start somewhere (and I would not consider myself much above beginner-level with React :) ). But if you want to make something with React, even just a toy example, I would strongly recommended reading through the introductory documentation at https://reactjs.org/docs/hello-world.html and the subsequent pages. In particular, I draw your attention to the following:

• https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element (which explains why when a "React element" such as yours is rendered, it can never be updated except by re-rendering).

• https://reactjs.org/docs/components-and-props.html#functional-and-class-components explains the basics of React Components, explaining that you need either a function or (for most non-trivial components) an ES6 Class. Once you have a React component, it will automatically re-render when its Props or State are altered. (As Salomao noted, your application contains neither.)