IIITRIX

На фронте

const params = new URLSearchParams(window.location.search);

    if(params.has('token')){
        showModal();
    }

Вам нужно определить полнотекстовый индекс @Index({ fulltext: true }) и использовать построитель запросов для написания собственного пользовательского запроса пользовательского запроса и использовать специальный синтаксис sql.
Сущность:

@Entity()
export class User {

    @PrimaryGeneratedColumn()
    id: number;

    @Index({ fulltext: true })
    @Column("varchar")
    name: string;

    @Index({ fulltext: true })
    @Column("varchar")
    lastname: string;

    @Index({ fulltext: true })
    @Column("text")
    personalDescription: string;
}

Выберите с помощью построителя запросов:

const searchTerm = "programmer";
const result = await connection.manager.getRepository(User)
            .createQueryBuilder()
            .select()
            .where('MATCH(lastname) AGAINST ('${searchTerm}' IN BOOLEAN MODE)')
            .orWhere('MATCH(name) AGAINST ('${searchTerm}' IN BOOLEAN MODE)')
            .orWhere('MATCH(personalDescription) AGAINST ('${searchTerm}' IN BOOLEAN MODE)')
            .getMany();

Была подобная проблема в 1-ом проекте. Решил ее так:

jQuery(document).ready(function () {
    $('.modal').on('hidden.bs.modal', function (e) {
        $(this).removeData('bs.modal');
    });
});

Теперь этот код кочует из проекта в проект ))) Дело было давненько, возможно на данный момен уже что-то изменилось.

есть 10 кнопок и одно модальное окно и в него в зависимости от кнопки нужно передать контент? во таком случае к каждой кнопке тем или иным образом нужно этот контент привязать, чтобы дотянуться до него через this. например 10 секций с контентом, и в каждой секции есть кнопка. получаем при нажатии кнопки ее родителя, например, секцию. далее ищем уже внутри нее контент и вставляем его в модалку
чтото типа

$('.open-modal-btn').on('click', function (e) {
	e.preventDefault();
	var $content = $(this).parents('.cf7-section').find('.cf7-content').html();//получаем родителя и ищем в нем контент
	$('#call-to-action').find('.modal-content-wrapper').html($content); //в модалке ищем место для вставки
	var $target = $(this).attr('data-target');
	openModal($target);
});

как-то так

const childElements = photos.map(photo => (
        <li className="list-unstyled">
            <Link to={`/${photo.id}`}>
                <img
                    className={`rounded ${ hovered === photo.id ? 'hover-class' : '' }`}
                    style={styles}
                    src={photo.urls.small}
                    alt={photo.description}
                    onMouseOut={() => {
                        setHovered(null)
                    }}
                    onMouseOver={() => {
                        setHovered(photo.id)
                    }}
                />
            </Link>
        </li>
    ))

1. Нет смысла оборачивать запуск вью в document.ready имхо, у вас же не используется jquery внутри или это только в примере?
2. Зачем заускать два экземпляра vue?
3. У вас id ссылки имеет одно и тоже имя show-modal, возможно из-за этого коллизия.

getDerivedStateFromProps это статический метод, вы не можете там обращаться к экземпляру класса (использовать this).
То, что вы вернете из этого метода, попадет в стейт вашего компонента.

Если допустить, что у вас в стейте компонента есть token, то это будет выглядеть так:

class XXX extends React.Component {
	state = {
		token: null
	}

	static getDerivedStateFromProps( props ){
		if( props.token){
			return {
				token: props.token
			}
		}
		return null;
	}
}

Гляньте доку на всякий случай и вот эту статью. Возможно, в вашем случае этот метод и не нужен, так как это не замена componentWillReceiveProps, а метод с немного другой механикой.

Фильтры, выводящие какие либо единицы измерения, используются неразрывные пробелы для их разделения. Соответствующий тикет.

Попробуйте отправить вывод в фильтр safe: {{ some_date|naturaltime|safe }}

Для именования файлов лучше использовать хэш, а не uuid. Это гарантирует уникальность имён, и обеспечивает дедупликацию данных: сколько бы раз пользователи не заливали файл с одинаковым содержимым, он будет храниться в единственном экземпляре (исключение - файлы с одинаковым содержимым и разными расширениями, но это разумный компромисс - работать с файлами без расширений менее удобно на многих этапах).

Можно реализовать соответствующую функциональность самостоятельно:

app_name/models.py:

import hashlib
import os

from django.conf import settings
from django.core.files.storage import FileSystemStorage
from django.db import models


def upload_to(instance, filename, fieldname):
    ext = os.path.splitext(filename)[1].lower()
    class_name = instance.__class__.__name__.lower()

    h = hashlib.sha256()
    field = getattr(instance, fieldname)
    for chunk in field.chunks():
        h.update(chunk)
    name = h.hexdigest()

    return os.path.join(
        class_name,
        name + ext,
    )


class OverwriteStorage(FileSystemStorage):
    def get_available_name(self, name, max_length=None):
        if self.exists(name):
            os.remove(os.path.join(settings.MEDIA_ROOT, name))
        return name


class Article(models.Model):
    image = models.ImageField(
        storage=OverwriteStorage(),
        upload_to=lambda inst, fn: upload_to(inst, fn, 'image'),
    )

Но гораздо разумнее воспользоваться готовой библиотекой:

Установить hashedfilenamestorage:
pip install django-hashedfilenamestorage

и добавить следующую строку в settings.py:

DEFAULT_FILE_STORAGE = 'django_hashedfilenamestorage.storage.HashedFilenameFileSystemStorage'

let char = name&&name.trim()[0]?name.trim()[0].toUpperCase():null

Можно создать портал https://reactjs.org/docs/portals.html

Ответ тут

Похоже на проблемы с cors. Либо копать настройки django, либо поставить какое нибудь расширение для браузера https://chrome.google.com/webstore/detail/allow-co...

Вангую, что должно быть так:

handleChange = e => {
 const { name, value } = e.target;

 this.setState({ [name]: value });
};

Зачем onClick? - при повторном клике на инпут класс удалится, а клик снаружи инпута вы так не обработаете. Наверное, стоит использовать onFocus и onBlur:

class App extends React.Component {
  state = {
    classes: [ 'bullshit' ],
  }

  onFocus = () => {
    this.setState(({ classes }) => ({
      classes: [ ...classes, 'focus' ],
    }));
  }

  onBlur = () => {
    this.setState(({ classes }) => ({
      classes: classes.filter(n => n !== 'focus'),
    }));
  }

  render() {
    return (
      <div className={this.state.classes.join(' ')}>
        <input onFocus={this.onFocus} onBlur={this.onBlur} />
      </div>
    );
  }
}

Подтяни его на lifecycle hook mounted().
Статья об этом

Нужно разобраться в причине появления этой ошибки.
Суть ее в том, что у вас this.props.match - undefined, а это значит (скорее всего, так как кода не вижу) - вы рендерите компонент не из <Router /> компонента (или не из обертки withRouter).

Если с причиной разбираться нет желания, и хочется просто сделать "заплатку", то можно сделать так:

componentDidMount() {
  if (this.props.match && this.props.match.params.postID) {
    const postID = this.props.match.params.postID
      axios.get(`http://127.0.0.1:8000/api/${postID}`)
      .then(res => {
        this.setState({
          post: res.data
        });
      })
    }
// если надо можете сделать else
  }