Andrey Shock

Вы передаете обычную строку в функцию, попробуйте так:
test(user)

https://mobx.js.org/react-integration.html

const arrayObject = [];
const referenceForInfo = {
  id:"",
  url:"",
  description:"",
  likes:"",
  comments:{
    id: "",
    avatar: "",
    message: "",
    name: ""
  }
};

const zapolnitel = (array, num) => {
  for (i = 0; i < num; i++) {
    array[i] = { ...referenceForInfo, id: i };
  }
}

zapolnitel(arrayObject, 5);

let str4 = 'a_baba_galamaga_tvoe_korito_est_nesti';
let a4_from = 'k';
let a4_to = 't';

const f4 = (str, a, b) => {
  let strNew = str4.split('_');
  let res = strNew.find((word,index,arr) => {
    if (
      word.indexOf(a) !== -1 && 
      word.indexOf(b) !== -1 &&
      word.indexOf(b) - word.indexOf(a) > 0
    ){
      return true;
    }
  });
  document.querySelector('.out-4').innerHTML = (res !== undefined)
    ? res.slice(res.indexOf(a) + 1, res.indexOf(b))
    : `undefined`;
}

f4(str4, a4_from, a4_to);

Можно запретить перенос, используя flex'ы
https://codepen.io/shock-dev/pen/XWVjvNg

P.S: У вас после слова "Next" div закрывается не в том месте, я так же это учел.

Settings | Editor | General | Appearance | Enable HTML tag tree highlighting

Возможно, я не совсем понял, что требуется, но если вы хотите блок, с заданной шириной, поместить в правый край, то можно родителю задать display: flex и выровнять
https://codepen.io/shock-dev/pen/xxpEXvw

У всех картинок одинаковый id, а id должен быть уникален, поэтому и берется только первая картинка, попробуйте использовать классы или что-нибудь другое для сбора картинок, так же рекомендую стилизовать картинки через классы

Возможно, но в данном случае классовые компоненты не делают жизнь проще

class MyClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          current: 'one'
        };
    }
    render() {
        return (
            <section className="section">
                <Tab value="one" active={this.state.current === 'one'} onClick={() => this.setState({current: 'one'})}>One</Tab>
                <Tab value="two" active={this.state.current === 'two'} onClick={() => this.setState({current: 'two'})}>Two</Tab>
            </section>
        )
    }
}

Есть небольшие различия, но все же:
https://github.com/shock-dev/my-gulp