Используя this.state.example слишком много раз, как мне поместить это в переменную?

Вы можете вывести его в свою собственную константу, используя синтаксис es6

const { example } = this.state

Теперь вы можете просто использовать «пример» вместо «this.state.example» везде

const {products} = this.state.test

Мы используем деструктивный синтаксис, потому что нам не нужно объявлять и присваивать значения по шагам.

Например, если у вас было три свойства в this.state.test

Вариант 1: -

const { a , b , c}  =  this.state.test;

Вариант 2: -

const a  =  this.state.test;
const b  =  this.state.test;
const c  =  this.state.test;

Затем вы можете использовать продукты [i] .name для доступа к названию продуктов.

Вы можете упростить это следующим образом:

const { products } = this.state.test;

и затем использовать его:

const { products } = this.state.test;
return (
  <div className="wrapper">
    <header className="example">
      <h1>{products[i].name}</h1>
    </header>

Почему бы просто:

const products = this.state.test.products

без деструктурирования или двухуровневой деструктуризации и все такое?