last day (15 days later) » 

12:01 PM
Hi
 
Hey
I tried that but it didn't work.
Let me show you, what I did.
Is that okay?
@RadonirinaMaminiaina
 
Okay, I'll check it
 
I have an element like:

`<Tag onClick={this.onTagSelection}>day</Tag>`

When I click on this element, I want the the text `day` to get auto-populated in the select box
onTagSelection(a: { [index: string]: any }) {
    const selectedTag = a.target.textContent;
    if (selectedTag) {

      this.setState({
        delimiterChildren: [...this.state.delimiterChildren, selectedTag]
      });
    }
  }
This is the function that gets called when I click the tag element.
delimiterChildren is the children that you mentioned in the answer.
const { delimiterChildren } = this.state;

    const soptions = delimiterChildren.map((dc, index) => (
      <Select.Option key={index.toString()}>{dc}</Select.Option>
    ));
 
just add console.log to a? it returns an event?
 
yes, it does.
 <FormItem label="Version Prefix">
            {getFieldDecorator("prefix", {
              initialValue: this.state.versionPrefix,
              rules: [
                {
                  required: true,
                  message: "Please fill out this field"
                }
              ]
            })(
              <Select
                mode="tags"
                onChange={value =>
                  this.setState({
                    delimiterChildren: [...delimiterChildren, value]
 
12:11 PM
I think your code is correct
 
This is what I did.
I get an error index.js:1452 TypeError: Cannot read property 'isSelectOptGroup' of undefined when I try to add.
 
And what is the value of your selectedTag?
 
day
This is from <Tag onClick={this.onTagSelection}>day</Tag>
 
so it works, but isSelectOptGroup is a property into your object or what is this?
 
Not in my object. But being thrown by antd
 
12:15 PM
give me a print screen of the full error please
 
I figured out the error. It was some typo. This is how it looks after trying to add a new field.
As you could see, the new entry gets appended to the previous entry
Does not add as a separate token
 
image not found
 
Could you click on the link please?
Were you able to open the image?
"https://pasteboard.co/IeENqlc.png"
 
Ah, ok. Yes I saw the image
 
Okay
That is the problem I have been facing.
It just gets appended.
 
12:21 PM
can you add a console.log(this.state.delimiterChildren) into your render function?
 
["day", "day", "day", "day"]
This is what it outputs, if I press 4 times.
 
And you still get the same result if you remove tokenSeparators={[","]}?
 
yes
 
Can you create a snippet so i can debug it too?
 
Okay
Sorry but am having difficulty running it individually. I have created a snippet that captures what I am doing: jsfiddle.net/84hdgb0p
Line 140: Calls onTagSelection
Line 81: Render method
 
12:47 PM
Can you give me the code of tag with render element?
 
I didn't get you.
 
You send a very long code.
I only need the code with your select tag so I can simulate your pb
 
Would you have some antd sandbox setup?
I could build on that?
 
1:14 PM
Have edited the sanbox
*sandbox
Are you able to access it?
@RadonirinaMaminiaina
 
You forgot to add css
 
Is it really required. It is scattered all across the application :)
 
I met this error: No render method found on the returned component instance: you may have forgotten to define render.
after adding tag and click on click-day
 
1:31 PM
Looks okay for me
Could you confirm
@RadonirinaMaminiaina
"https://pasteboard.co/IeFiuTJ.png"
 
Yes, it looks okay on your side, but here, I got:
 
import React from "react";
import ReactDOM from "react-dom";
import { FormComponentProps } from "antd/lib/form/Form";
import { Form, Input, Button, Alert, message, Tag, Select } from "antd";
import "./styles.css";

const FormItem = Form.Item;
const { TextArea } = Input;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      delimiterChildren: []
    };
    this.onTagSelection = this.onTagSelection.bind(this);
  }

  onPrefixChange = e => {
    let newPrefix = "";
 
I got the error above after add 2 tags
 
Can't understand why it is happening? Would you be able to share a small working example where I am able to add tokens by clicking on some text?
 
1:48 PM
I add antd css, it looks prettier, and you can see how to reproduce the error
 
ok, but did not understand why it is happening
Also, it adds all the items not as a token but as options.
 
Ok, I'll help you to debug it
 
Thank you
 
So when I click , click-day, it adds an entry to select box but not as a token.
 
2:01 PM
How is the format of your token?
Where it should be appended?
 
When I click on click-day it should just get appended as "https://imgur.com/U1Z7fiG"
So click-day is one token.
When I click again on click-day, it will be a new token that gets appended and visible as selected.
 
https://codesandbox.io/s/r72j0r073m
I added onChange function.

It doesn't duplicate your tag anymore.
Almost done?
 
Looks like it still does "https://pasteboard.co/IeFxjxh.png"
Also it adds some random numbers
Also it still does not make the added token selected by default.
I have to manually select click-day
I want click-day to automatically appear as selected in the select box. Also duplicate click-day is fine.
 
2:35 PM
Were you able to get it?
@RadonirinaMaminiaina
 

last day (15 days later) »